Chapter 46. Defining Class Styles
| You saw in Topic 45 about how to redefine the appearance of HTML tags with great precision. But what happens if you need a style that doesn't necessarily apply to any particular HTML tag or logical sequence of tags? Never fear. CSS, like the Buddha, provides. Simply define your own style selector, called a class.
A typical class style rule looks something like this: .bolditalic { font-weight: bold; font-style: italic; } Come up with a name for your class, and put a period in front of it, as in .bolditalic in the preceding code. Then, just write the style definition. It's as easy as that.
A CSS class is kind of like a club that any HTML tag can join, but membership is by invitation only. To invite an HTML tag into the club, fill out the tag's class attribute, as in the Listing 46.1. Listing 46.1. View Source for Figure 46.1. <style type="text/css"> .bolditalic { font-weight: bold; font-style: italic; } </style> <h1 >This first-level heading belongs to the bolditalic class.</h1> <h1>This first-level heading does not.</h1> <p >This paragraph belongs to the bolditalic class.</p> <p>This paragraph does not.</p> Figure 46.1. After you define a class style, put its name in the class attribute of the tag that you want to style. The Listing 46.1 reveals a couple of interesting things. First, you can use your class style on any type of tag. Remember, a class is like a club that any tag can join. Second, the class style doesn't override the default appearance of the tags in your browser, unless the style directly contradicts the browser's default. First-level heads are bold by default, so your h1 tag that belongs to the club simply turns italic; it's already bold. If the class style had specified the font weight as normal, then the h1 tag would appear in normal type, not bold, since the style definition contradicts the browser's default choice of boldface.
Now consider this paragraph: <p>This paragraph contains text that belongs to the bolditalic class.</p> How can you make just the word text join the bolditalic club? You can't define the class attribute of the paragraph tag, since all the text in the paragraph would turn bold and italic, not just the word text. What you need for the job is a cunningly placed span tag: <p>This paragraph contains <span>text</span> that belongs to the bolditalic class.</p> The span tag has no visible effect in the browser window. Its sole purpose is to mark off a segment or span of content. Now that you have a tag in exactly the right place, you can ask the span to join the club:
See the results in Figure 46.2. Figure 46.2. If you don't have a tag in the right place, put the span tag exactly where you need it, and then bring the span into your class style. |
bolditalic class.</p> 