Principles of Web Design Sklar Chapter 5 Hands-On Projects CIT-150

Principles of Web Design Sklar Chapter 5 Hands-On Projects CIT-150

1. In the following set of steps, you will learn how to style listitem elements with the list-style properties. As you work through the exercise, refer to Figure 5-27 to see the results you will achieve. Save your file and test your work in the browser as you complete each step.

To apply the list-style properties:
a. Open the file lists.html in your HTML editor, and save it in your work folder as lists1.html.
b. Copy the image file diamond.gif into your work folder.
c. In your browser, open the file lists1.html. When you open the file, it looks like Figure 5-26. Notice that the file contains three lists. You will apply a different liststyle to each list.
d. The first list on the page is a bulleted list that currently displays the default disc (bullet) style. Write a style rule that uses a class selector circle to uniquely select the list. Set the list-style-type property to change the bullet style to circle.
ul.circle {list-style-type: circle;}
e. Now apply the style to the first list by adding the class attribute to the <ul> element.
<!– Bulleted List –>
<ul class=”circle”>
<li>Bread</li>
<li>Milk</li>
<li>Cheese</li>
<li>Eggs</li>
</ul>
f. The second list on the page is an ordered list that currently displays the default decimal style. Write a style rule that uses a class selector alpha to uniquely select the list. Set the list-style-type property to change the style to upper-alpha.
ol.alpha {list-style-type: upper-alpha;}
g. Now apply the style to the first list by adding the class attribute to the <ol> element.
<!– Alphabetical List –>
<ol class=”alpha”>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
<li>Winter</li>
</ol>
h. The third list on the page is an unordered list that currently displays the default bullet style. Write a style rule that uses a class selector image to uniquely select the list. Set the list-style-image property to a URL value, using the image file diamond.gif.
ul.image {list-style-image: url(diamond.gif);}
i. Now apply the style to the first list by adding the class attribute to the <ol> element. Figure 5-27 shows the finished document.
<!– List Image –>
<ul class=”image”>
<li>Spruce</li>
<li>Pine</li>
<li>Elm</li>
<li>Birch</li>
</ul>

2. Modify an existing HTML document to use Cascading Style Sheets.
a. Build styles using the existing standard HTML elements in the file.
b. Test the work in multiple browsers to verify that all styles are portable.
c. Remove the files and place them in an external style sheet.
d. Link the HTML file to the style sheet. Test to make sure the file is displayed properly.