CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations. The following code is a CSS rule.


h1{color:red;front-size:12px;}

In the CSS code above:

h1 is the selector.
{color:red;front-size:12px;} is the declarations.
color is the property name
red is the property value
color:red; is called one declaration

Each declaration consists of a property and a value. selector selects the HTML element you want to style.

The property is the style attribute you want to change. Each property has a value. CSS declarations ends with a semicolon, and declaration groups are surrounded by curly brackets.

Here is another CSS to style <p>. It changes the text color to red and makes the text align to center.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p {<!--from   w  w  w .j ava 2  s . co  m-->
          color:red;
          text-align:center;
        }
        </style> 
    </head> 
    <body> 
        <p>Visit the website java2s.com</p> 
    </body> 
</html>

Click to view the demo

To make the CSS more readable, you can put one declaration on each line.


p{
   color:red;
   text-align:center;
}

The code above generates the following result.