Often you will want to differentiate between two different classes of the same tag. You might, for example, want to have the paragraph that displays the author of this review display differently than the rest of the paragraphs.
Use your text editor to change one line in mistresses.html from:
<p>review by Jerry Stratton, Wednesday, February 23, 2005</p>
to:
<p class="byline">review by Jerry Stratton, Wednesday, February 23, 2005</p>
We’ve added the class “byline” so that we can differentiate between byline paragraphs and other paragraphs.
Inside your style sheet file, add:
p.byline {
text-align: right;
font-family: cursive;
}
Here, we’ve specified that for paragraphs of the class “byline”, align them to the right and give them a cursive font. You could also specify simply “.byline” instead of “p.byline” and then the definition would apply to any tag of the class byline.
I prefer to always specify the tag as well as the class in the CSS file; it helps remind me what this class is for. In this case, paragraphs.
You can have as many classes as you want in the class="class1 class2 classetc." attribute of the HTML tag. Each class name is separated by a space. The order of the classes in the HTML doesn’t matter. Only the order of the class definitions in the style sheet matters. For example, class="byline jerry" is exactly the same as writing class="jerry byline". Any conflicts will be resolved by the order of the definitions in the css files, not by the order of the class names in the class="" attribute.
Related Pages
