Forming an Exclusive Club


If regular class styles are like clubs that any tag can join, then you can also define exclusive clubs that only tags of a particular type can join. For instance, you can create a class style that doesn't affect all paragraphs in a document but only those paragraphs that belong to the class. First-level headers, second-level headers, and all the rest can't belong to the class unless you add them to the style selector.

Such a style rule looks like this:

 p.bolditalic {   font-weight: bold;   font-style: italic; } 

See Figure 46.3 for an example of this style in action.

Listing 46.2. View Source for Figure 46.3.

[View full width]

 <p >Only paragraphs can join the p.bolditalic class.</p> <p>This paragraph opts not to join, so it doesn't enjoy the benefits of membership.</p> <h1 >This first-level heading belongs to the class, but it doesn't get  any of the benefits, because it isn't a paragraph.</h1> 

Figure 46.3. By combining a tag selector with a class name, you create a class style to which only tags of that particular type can belong.


As you can see, nothing is stopping the h1 tag from trying to join the class, but the browser flat-out ignores it, since it isn't a paragraph. Of course, the browser still displays the first-level header in bold, but that's just because these elements appear in bold by default. The boldface here has nothing to do with the style sheet.

TIP

When you fill out the class attribute, don't include the tag selector in the name of a tag-specific class. Just type the name of the class.


TIP

Any type of tag selectorsimple, contextual, child, or siblingcan have a special class designation. Just append a period and the name of the class after the selector. See Topic 45 for more information on the types of selectors.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net