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.


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.

        <style type="text/css"> 
        p {<!--from   w  ww .ja  v  a2  s. c om-->
        <p>Visit the website java2s.com</p> 

The code above is rendered as follows:

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



The following code has a Simple CSS Style.


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.