CSS Syntax

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

  • selector is a code snippet used to identify the web page element or elements that are to be affected by the styles.
  • 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.
  • 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;

colorfont-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 red3em, 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.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Create a Consistent Cross-Browser Experience

Every browser interprets the HTML specification a little differently. As a result, when identical code is rendered in two different browsers, there are often minor differences in…

What Can CSS Do?

A better question might be: “What can’t CSS do?” CSS can be used to turn an HTML document into a professional, polished design. Here are a few…

Specificity

The second rule that determines which rules are applied to each HTML element is the rule of specificity. CSS rules with more specific selectors will overrule CSS rules with less…

Cascading Inheritance

Why are CSS styles called cascading? When multiple rules are written that conflict with each other, the last rule written will be implemented. In this way, styles cascade…

How CSS Works

When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may…