CSS Tutorial - 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  ww .ja  v  a2  s. c om-->
          color:red;
          text-align:center;
        }
        </style> 
    </head> 
    <body> 
        <p>Visit the website java2s.com</p> 
    </body> 
</html>

The code above is rendered as follows:

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

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




Example

The following code has a Simple CSS Style. 

background-color:grey; 
color:white

In this example, the style has two declarations. The first sets the value grey for the background-color property, and the second sets the value white for the color property.

There is a wide range of CSS properties available, and each controls some aspect of the appearance of the elements to which it is applied.