CSS Rules

A CSS rule is a statement or series of statements that tells the web browser how to render a certain element or elements on the page. Each statement in a CSS rule starts with a selector, which is the element to which the rule will be applied. For example, in the following assignment, h1 is the selector that is being given a font size 240 percent larger than the default:

h1 { font-size:240%; }

All properties to be changed in rules must appear within the { and } symbols that follow the selector. The part before the colon (font-size, in this example) is the property to be changed, while the part after the colon is the value applied to it (240%, in this case). Providing a value of 240% to the font-size property of the h1 selector ensures that the contents of all <h1>...</h1> tags will be displayed at a font size that is 240 percent larger than the default size.

Lastly comes a ; (semicolon) to end the statement. In this instance, because font-size is the last property in the rule, the semicolon is not required (but it would be if another assignment were to follow).

Using Semicolons

In CSS, semicolons are used to separate multiple CSS statements on the same line. But if there is only one statement in a rule (or in an inline style setting within an HTML tag), you can omit the semicolon, as you can for the final statement in a group.

However, to avoid hard-to-find CSS errors, you may prefer to always use a semicolon after every CSS setting. You can then copy and paste them, and otherwise modify properties, without worrying about removing semicolons where they aren’t strictly necessary, or having to add them where they are required.

Multiple Assignments

You can create multiple style declarations in a couple of different ways. Firstly, you can concatenate them on the same line, like this:

h1 { font-size:240%; color:blue; }

This adds a second assignment that changes the color of all <h1> headings to blue. You can also place the assignments one per line, like the following:

h1 { font-size:240%;
color:blue; }

Or you can space the assignments out a little more, so that they line up below each other in a column at the colons, like this:

h1 {
    font-size:240%;
    color    :blue;
}

This way you can easily see where each new set of rules begins, because the selector is always in the first column, and the assignments that follow are neatly lined up with all property values starting at the same horizontal offset.

Note

In the preceding examples, the final semicolon is unnecessary, but should you ever want to concatenate any such groups of statements into a single line it will be very quick to do with all the semicolons already in place.

You can specify the same selector as many times as you want, and CSS will combine all the properties. So, the previous example could also be specified as:

h1 { font-size: 240%; }
h1 { color    : blue; }

Note

There is no right or wrong way to lay out your CSS, but I recommend you at least try to keep each block of CSS consistent with itself, so that it can easily be taken in at a glance.

What if you specified the same property to the same selector twice?

h1 { color    : red; }
h1 { color    : blue; }

The last value specified, in this case blue, would apply. In a single file, repeating the same property for the same selector would be pointless, but such repetition happens frequently in real-life web pages when multiple style sheets are applied. It’s one of the valuable features of CSS, and is where the term cascading comes from.

Using Comments

It is a good idea to comment your CSS rules, even if you only describe the main groups of statements rather than all or most of them. You can do this in two different ways. You can place a comment within a pair of /* ... */ tags, like this:

/* This is a CSS comment */

Or you can extend a comment over many lines, like this:

/*
    A Multi-
    line
    comment
*/

Warning

When using multiline comments, you should be aware that you cannot nest single-line (or any other) comments within them. Doing so can lead to unpredictable errors.