HTML and CSS Reference
In-Depth Information
But this method is inefficient—imagine creating such a list for an element that will carry
10 or 15 styles! Instead, you can group your declarations together:
h1 {font: 18px Helvetica; color: purple; background: aqua;}
This will have exactly the same effect as the three-line style sheet just shown.
Note that using semicolons at the end of each declaration is crucial when you're group-
ing them. Browsers ignore whitespace in style sheets, so the user agent must rely on
correct syntax to parse the style sheet. You can fearlessly format styles like the following:
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}
If the second semicolon is omitted, however, the user agent will interpret the style sheet
as follows:
h1 {
font: 18px Helvetica;
color: purple background: aqua;
}
Because
background
: is not a valid value for
color
, and because
color
can be given only
one keyword, a user agent will ignore the
color
declaration (including the
background:
aqua
part) entirely. You might think the browser would at least render
h1
s as purple
text without an aqua background, but if the browser is programmed at all correctly,
you won't even get purple
h1
s. Instead, they will be the default color (which is usually
black) with a transparent background (which is also a default). The declaration
font:
18px Helvetica
will still take effect since it was correctly terminated with a semicolon.
Although it is not technically necessary to follow the last declaration of
a rule with a semicolon, it is generally good practice to do so. First, it
will keep you in the habit of terminating your declarations with semi-
colons, the lack of which is one of the most common causes of rendering
errors. Second, if you decide to add another declaration to a rule, you
won't have to worry about forgetting to insert an extra semicolon. Avoid
both problems—always follow a declaration with a semicolon, wher-
ever the rule appears.
As with selector grouping, declaration grouping is a convenient way to keep your style
sheets short, expressive, and easy to maintain.
Grouping Everything
You now know that you can group selectors and you can group declarations. By com-
bining both kinds of grouping in single rules, you can define very complex styles using