CSS syntax includes selectors, properties, values, declarations, declaration blocks, rulesets, at-rules, and statements.

• A selector is a code snippet used to identify the web page element or elements that are to be affected by the styles.
• A property is the aspect of the element that is to be affected. For example, color, padding, margin, and background are some of the most commonly used CSS properties.
• A value is used to define a property. For example, the property color might be given the value of red like this: color: red;.
• The combination of a property and a value is called a declaration.
• In many cases, multiple declarations are applied to a single selector. A declaration block is the term used to refer to all of the declarations applied to a single selector.
• A single selector and the declaration block that follows it in combination are referred to as a ruleset.
• At-rules are similar to rulesets but begin with the @ sign rather than with a selector. The most common at-rule is the @media rule which is often used to create a block of CSS rules that are applied based on the size of the device viewing the web page.
• Both rulesets and at-rules are CSS statements.

An Example of CSS Syntax

Let’s use a block of CSS to clarify what each of these items is.

h1 {
    color: red;
    font-size: 3em;
    text-decoration: underline;
    }

In this example, h1 is the selector. The selector is followed by a declaration block that includes three declarations. Each declaration is separated from the next by a semicolon. The tabs and line breaks are optional but used by most developers to make the CSS code more human-readable.

By using h1 as the selector, we are saying that every level 1 heading on the web page should follow the declarations contained in this ruleset.

The ruleset contains three declarations:

• color:red;
• font-size: 3em;
• text-decoration: underline;

color, font-size, and text-decoration are all properties. There are literally hundreds of CSS properties you can use, but only a few dozen are commonly used.

We applied the values red, 3em, and underline to the properties we used. Each CSS property is defined to accept values formatted in a specific way.

For the color property we can either use a color keyword or a color formula in Hex, RGB, or HSL format. In this case, we used the color keyword red. There are a few dozen color keywords available in CSS3, but millions of colors can be accessed with the other color models.

We applied the value of 3em to the property font-size. There are a wide range of size units we could have used including pixels, percentages, and more.

Finally, we added the value underline to the property text-decoration. We could have also used overline or line-through as values for text-decoration. In addition, CSS3 allows for the use of the line-styles solid, double, dotted, dashed, and wavy was well the specification of text-decoration colors. We could have applied all three values at once by using a declaration like this:

text-decoration: blue double underline;

That rule would cause the h1 in our initial example to be underlined with a blue double line. The text itself would remain red as defined in our color property.