untitled

Matching exact attribute values ........................................................

The final variation on the attribute selector technique requires an exact

match to the attribute value. This selector boldfaces only cars with 2999

as their onSaleattribute’s value:

car[onSale=”2999”] {font-weight: bold;}

This causes the text of the second (but not the first or third) elements in the

following HTML to be boldfaced:

<car onSale=”5000”>Chevy</car>

<car onSale=”2999”>Ford</car>

<car>Maxim</car>

Building Your First Style Sheet ....................................................................

You’ve experimented with small examples — defining a single selector and

then trying it out on an element or two in HTML code. Now it’s time to try a

somewhat larger example to get a more accurate idea of the power of CSS.

In this example, you create an HTML page, and then modify it via a CSS file.

Finally, you apply two CSS files to the HTML, to see cascading, and specificity,

in action.

An easy way to generate an HTML page to practice with is to write a few para-

graphs (or just copy and paste them) into Word — and then have Word trans-

late them into an HTML document. To see how this works, follow these steps:

1. Run Word 2003.


2. Type three or four paragraphs.


3. Make one paragraph italic.


4. Type a few words on a line by themselves, and then press Enter.


5. Drag your mouse across this text to select it.


6. Choose Format➪Styles and Formatting.


7. Double-click Heading 1 in the list of styles.
   The headline style Heading 1 is applied to the selected text.


8. Create a couple of second-level headlines by repeating steps 4
   through 7, but instead of choosing the Heading 1 style in step 7,
   choose Heading 2.

Your results should look something like Figure 3-2.

54 Part I: The ABCs of CSS