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
Search WWH ::

Custom Search