• Choose a category
• All
• Classic-Fiction

Chapter 3: Selectors, Class, and Style

In This Chapter

Modifying specific named elements

Adding and modifying emphasis and strong emphasis

Creating classes

Introducing span and div

Using pseudo-classes and the link tag

Selecting specific contexts

Defining multiple styles

You know how to use CSS to change all the instances of a particular tag, but what if you want to be more selective? For example, you might want to change the background color of only one paragraph, or you might want to define some special new type of paragraph. Maybe you want to specify a different paragraph color for part of your page, or you want visited links to appear differently from unselected links. The part of the CSS style that indicates what element you want to style is a selector. In this chapter, you discover powerful new ways to select elements on the page.

Selecting Particular Segments

Figure 3-1 illustrates how you should refer to someone who doesn’t appreciate your Web development prowess.

Defining more than one kind of paragraph

Apart from its cultural merit, this page is interesting because it has three different paragraph styles. The introductory paragraph is normal. The quote is set in italicized font, and the attribution is monospaced and right-aligned.

The quote in the following code was generated by one of my favorite sites on the Internet: the Shakespearean insult generator. Nothing is more satisfying than telling somebody off in iambic pentameter.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Literature Quote of the day

How to tell somebody off the classy way:

[Thou] leathern-jerkin, crystal-button, knot-pated,

agatering, puke-stocking, caddis-garter, smooth-tongue, Spanish pouch!

-William Shakespeare (Henry IV Part I)

Figure 3-1: This page has three kinds of paragraphs.

Styling identified paragraphs

Until now, you’ve used CSS to apply a particular style to an element all across the page. For example, you can add a style to the

tag, and that style applies to all the paragraphs on the page.

Sometimes (as in the Shakespeare insult page), you want to give one element more than one style. You can do this by naming each element and using the name in the CSS style sheet. Here’s how it works:

1. Add an id attribute to each HTML element you want to modify.

For example, the paragraph with the attribution now has an id attribute with the value attribution.

2. Make a style in CSS.

Use a pound sign followed by the element’s ID in CSS to specify you’re not talking about a tag type any more, but a specific element: For example, the CSS code contains the selector #attribution, meaning, “Apply this style to an element with the attribution id.”

#attribution {

3. Add the style.

Create a style for displaying your named element. In this case, I want the paragraph with the attribution ID right-aligned, monospace, and a little smaller than normal. This style will be attached only to the specific element.

#attribution {

font: 80% monospace;

text-align: right;

}

The ID trick works great on any named element. IDs have to be unique (you can’t repeat the same ID on one page), so this technique is best when you have a style you want to apply to only one element on the page. It doesn’t matter what HTML element it is (it could be an h1, a paragraph, a table cell, or whatever). If it has the ID quote, the #quote style is applied to it. You can have