In Week 3, you added your group's updated content to the Dog Hall of Fame webpages. In this exercise, you will continue to update those pages with an external style sheet by doing the following:

Create and name an external style sheet and name it dogstyles04 with the suffix .css and save it in a styles folder that you will create within your group's web folder.

Add your name and the current date as a comment to the first line of the css file.

Open the files you created for the Dog Hall of Fame in Week 3 in your HTML editor and float the images that do not span the page to the left or right by adding the attribute of to the tag and the corresponding class="float-right" or class="float-left" to the tag and the corresponding float-left .float-left {float:left;} or .float-right {float:right;} rules to the external style sheet. Make your decision on whether the image should float left or right based on what looks best on the page.

Add a 2% left and bottom margin style to the .float-right selector using the following declaration:

margin: 0 0 2% 2%;

Add a 2% right and bottom margin style to the .float-left selector using the following declaration:

margin: 0 2% 2% 0;

Add a tag to the

section of each page in the website to link the external style sheet to the HTML page as follows:

Save both the CSS and HTML files, and open the dogfame04.html file in your web browser to make sure the style sheet is linked and the image is floating properly.

After viewing your pages, determine appropriate places for the float to be cleared, (for example, you want to clear the float when the new headings of Working Dog and Companion Dog are introduced). Add a class="clear-float" to those tags in the HTML document and a corresponding .clear-float { clear: both; } rule to the CSS file.

Constrain the content to take 70% of the width of the page, by inserting

after the opening tag, then close the div with

before the closing tag on each page.

Then add a corresponding rule to set the page-wrapper content to 70% and centered in the page as follows:

#page-wrapper { width: 70%;

margin: 0 auto; /* 0 top and bottom, auto left and right */

};

Save and refresh your files.

Have each group member finish the style sheet using their own style decisions. Include styles for these elements:

Font color and font face for the body

Background color for the main content

Add any other styles you consider appropriate or important to best display the content on the pages

You must use comments in your CSS file to document these styles.

Part 2: Refer to the datafiles in the datasets for chapter 4 in the Cengage Student Companion Site. Use these as examples or guides ONLY as you validate and correct your team's HTML and CSS files -- each group's code will differ based on the group's design. Please zip all files and pictures in one folder, before uploading.