Question
3. Styling the Dog Hall of Fame Webpages
Research and Collaboration
Part 1: In Chapter 3, you added content to the Dog Hall of Fame webpages. In this exercise, you
will update those pages with an external style sheet that includes the following updates: (Note: Your
instructor may want you to use the Data Files for Students provided for this exercise instead.)
1. Create an external style sheet with the name dogstyles04.css and save it in the styles
folder within the your_turn_3 folder.
2. Add your name and the current date as a comment to the first line of the dogstyles04.css file.
3. Open the files you created for the Dog Hall of Fame in Chapter 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
class="float-right" or class="float-left" to the <img> tag and the corresponding
.float-right {float:right;} or .float-left {float:left;} 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.
4. 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;
5. Add a tag to the <head> section of each page in the website to link the external style sheet to
the dogfame04.html page as follows:
<link rel="stylesheet" href="styles/dogstyles04.css">
Save both the CSS and HTML files, and open the dogfame04.html file in your browser to make sure the style sheet is linked and the image is floating properly.
6. After viewing your pages, determine appropriate places for the float to be cleared. (For
example, you probably 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.
7. Constrain the content to take 70% of the width of the page by inserting <div id="pagewrapper">
after the opening <body> tag and closing the div with </div> <!--close
page-wrapper--> before the closing </body> 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 */
}
8. Save and refresh your files.
9. Have each team 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
• Any other styles you deem important or appropriate to best display the content on the pages
Use comments in your CSS file to document these styles.
10. Validate and correct your HTML and CSS files, and submit your assignment in the format
specified by your instructor.
Part 2: As a group, share and compare how each of you styled the webpages. Discuss which
features of each style sheet you liked the best. Together, build a final external style sheet that
includes the best features from each member of your team. Note the features you chose from each
member.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.