246996016-HTML5-Step-by-Step

Creating Classes and IDs for Applying Styles 95
1. Apply a class named appleton to all the Appleton Acres items.
Sampson & Company All-Natural Pesticide
Vickers and Vickers Fertilizer Sticks
Appleton Acres Big Sack of Bulbs, Tulips
Jackson and Perkins Climbing Rosebushes
Easton Create-Your-Own Paving Stones Kit
Appleton Acres Big Sack of Bulbs, Daffodils
Appleton Acres Big Sack of Bulbs, Hyacinths
Appleton Acres Big Sack of Bulbs, Crocuses
Hawthorne Hills Hosta, 3-Pack
Sampson & Company All-Natural Herbicide
2. Apply a class named sampson to the Sampson & Company items.
Sampson & Company All-Natural Pesticide
Vickers and Vickers Fertilizer Sticks
Appleton Acres Big Sack of Bulbs, Tulips
Jackson and Perkins Climbing Rosebushes
Easton Create-Your-Own Paving Stones Kit
Appleton Acres Big Sack of Bulbs, Daffodils
Appleton Acres Big Sack of Bulbs, Hyacinths
Appleton Acres Big Sack of Bulbs, Crocuses
Hawthorne Hills Hosta, 3-Pack
Sampson & Company All-Natural Herbicide
3. In the area, create a style rule that makes items in the appleton class green.
hr {color: green; background-color: green; height: 3}
.appleton {color: green}
Note Each style rule here is run in as a single line, whereas in earlier examples, rules were
broken into multiple lines for readability. It makes no difference which way you do it. The
one-line method is more compact, but the multi-line method is easier to browse when
editing code. From this point on in the book, most style rules will be written in the more
compact form to save space.
4. In the area, create a style rule that makes items in the sampson class blue.
hr {color: green; background-color: green; height: 3}
.appleton {color: green}
.sampson {color: blue}