Monday, October 4, 2010

Css Tutorial : Group Exceptions

What if you still wish to treat one of those headings slightly differently? Let’s say you’re happy
with the font, line-height, and color, but wish to render the <h1> heading in italicized text.
Luckily, there is a way to do that while still grouping h1 with the other selectors.
To create the italicized text, none of the existing declarations need to be altered. A new
declaration, font-style: italic, is required, however. If that were to be added to the group, all
headings would be italicized. Instead, a new style is added to the existing group: /* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}
Now the browser will collate both h1 selectors (one from the grouping and the stand-alone
selector) to render top-level headings as specified in the grouping and also in italics. Again, this
method can be applied to any selectors.

No comments:

Post a Comment