As you have just seen, style rules can modify the built-in tags in HTML by redefining their formatting . Styles don’t stop there, however . You can make your own styles by creating classes and IDs .
Classes and IDs mark certain elements so that you can refer to them in your style sheet . A class can be applied to multiple selections, whereas an ID uniquely identifies a specific selection within a document . (Different documents can use the same ID .)
For example, suppose you have an unordered list of products, and you want new prod-ucts to appear in red . One way to do it would be to manually add the style=”color: red”
attribute to each of the list items, like this:
<li style="color: red">Spraying Techniques for Fruit Trees</li>
94 Chapter 6
However, this method is not optimal because if you change your mind and decide to make the new items blue instead, you would need to make the change manually for each instance . A better way is to create a class called new and define formatting for it in the <style> area . Then you could apply the new class to each bullet point you want to spotlight .
To apply a class style, add a class= attribute to the opening tag for the element . For example, to make a list item part of the new class, use the following:
<li class="new">Spraying Techniques for Fruit Trees</li>
Then in the <style> area, add a style that defines the class as red . The only difference between defining a class and redefining a standard tag is that you put a period in front of a class name, as shown here:
IDs work the same way, except that you can apply them only once per document . For example, you might apply an ID to a unique heading . To create an ID, add an id= attri-bute to the tag, like this:
<li id="special">Spraying Techniques for Fruit Trees</li>
Then define the ID in the <style> area, preceding the ID name with a hash symbol (#), like this:
In this exercise, you will create two classes and apply them to items in a list . Then you’ll change the items’ formatting by applying different styles to the classes .
SET UP Use the bestsellers.htm file in the practice folder for this topic. This file is located in the Documents\Microsoft Press\HTML5 SBS\06Styles\CreatingClasses.
Open the bestsellers file in Notepad and in Internet Explorer.
1.
Apply a class named appleton to all the Appleton Acres items .<ol>
<li>Sampson & Company All-Natural Pesticide</li>
<li>Vickers and Vickers Fertilizer Sticks</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Tulips</li>
<li>Jackson and Perkins Climbing Rosebushes</li>
<li>Easton Create-Your-Own Paving Stones Kit</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Daffodils</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Hyacinths</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Crocuses</li>
<li>Hawthorne Hills Hosta, 3-Pack</li>
<li>Sampson & Company All-Natural Herbicide</li>
</ol>
2.
Apply a class named sampson to the Sampson & Company items .<ol>
<li class="sampson">Sampson & Company All-Natural Pesticide</li>
<li>Vickers and Vickers Fertilizer Sticks</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Tulips</li>
<li>Jackson and Perkins Climbing Rosebushes</li>
<li>Easton Create-Your-Own Paving Stones Kit</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Daffodils</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Hyacinths</li>
<li class="appleton">Appleton Acres Big Sack of Bulbs, Crocuses</li>
<li>Hawthorne Hills Hosta, 3-Pack</li>
<li class="sampson">Sampson & Company All-Natural Herbicide</li>
</ol>
3.
In the <style> area, create a style rule that makes items in the appleton class green .<style>
hr {color: green; background-color: green; height: 3}
.appleton {color: green}
</style>
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 <style> area, create a style rule that makes items in the sampson class blue .<style>
hr {color: green; background-color: green; height: 3}
.appleton {color: green}
.sampson {color: blue}
</style>
96 Chapter 6
5.
Save the file, and then refresh the Internet Explorer display . Items 1 and 10 are blue, and items 3, 6, 7, and 8 are green .CLEAN UP Close the Notepad and Internet Explorer windows.