CSS Syntax

A CSS rule consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document.


CSS rules have two main parts, a selector and one or more declarations:

CSS Selector Syntax Illustration

Selectors are used to declare which of the markup elements a style applies to.

The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute. You will learn more about selectors in next chapter.

Each declaration consists of a property and a value. The property is the style attribute you want to change; they could be color or border etc. Each property has a value, for example color property can have value either blue or #0000FF etc.

h1 {color:blue; text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:

  • h1 {
  •     color: blue;
  •     text-align: center;
  • }

In the example above h1 is a selector, color and text-align are properties and given blue and center are the corresponding values of these properties.

Note: A CSS declaration always ends with a semicolon ";", and the declaration groups are always surrounded by the curly brackets "{}".

CSS Comments

Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS. Comments are significant to programmers but typically ignored by browsers.

A CSS comment begins with /*, and ends with */, See the example below:

  • /* This is a CSS comment */
  • h1 {
  •     color: blue;
  •     text-align: center;
  • }

Your Feedback:

We would love to hear from you, please drop us a line.