246996016-HTML5-Step-by-Step

118 Chapter 7
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\07Text\CreatingSpan folder.
Open the bestsellers file in Notepad and in Internet Explorer.
1. Create a span around the company name in each of the list items, and assign a class
called company to each one.
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
Tip Use the Clipboard to copy and paste the opening and closing tags to save
time. They are identical for each entry.
Note In the above example, the space following the text in each span is included within
the span. The space could have gone outside of the span instead. If the class applied
to the span specifies a very different font size than used outside the span, the placement
of the space inside versus outside could make a difference in how the text appears
onscreen; in this exercise’s example, it makes no difference.
2. In the section of the document, create a style that defines the company
class as bold, italic, and red.
.company {font-style: italic; font-weight: bold; color: red}
3. Save the file, and then refresh the Internet Explorer display.