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.