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.

Syntax

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

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:

Example

Try this code »

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

In the example above h1 is a selector, color and text-align are properties and given blueand 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:

Example

Try this code »

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