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.
GEEKSPEAKA class is a custom-made style selector that doesn't necessarily apply to any particular HTML tag or sequence of tags. |
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.
.bolditalic {
font-weight: bold;
font-style: italic;
}
TIPWhen you fill in the class attribute of an HTML tag, don't include the period at the beginning of the class name. Just give the name. |
Listing 46.1. View Source for Figure 46.1.
<style type="text/css">
.bolditalic {
font-weight: bold;
font-style: italic;
}
</style>
<h1 class="bolditalic">This first-level heading belongs to the bolditalic class.</h1>
<h1>This first-level heading does not.</h1>
<p class="bolditalic">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.
[View full size image]

GEEKSPEAKA span is a segment of content identified by span tags in an HTML document. |
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 text 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:
<p>This paragraph contains <span>text</span> that belongs to the bolditalic class.</p>
[View full width]<p>This paragraph contains <span class="bolditalic">text</span> that belongs to theSee the results in Figure 46.2.bolditalic class.</p>
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.
[View full size image]
