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:
- 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
@mediarule 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.
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.
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:
We applied the values
underline to the properties we used. Each CSS property is defined to accept values formatted in a specific way.
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
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