Question
2. Style the WebDevPros Webpages
Professional
Part 1: In Chapter 3, you added content within a wireframe and site map for the WebDevPros
website. In this exercise, you will update the pages for that website 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 webdevstyles04.css and save it in the
styles folder within the your_turn_2 folder.
2. Add your name and the current date as a comment to the first line of the webdevstyles04.css
file.
3. Open index.html and other files you created for WebDevPros in Chapter 3 in your HTML
editor and float the images in the header section 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 how it looks best on the page.
4. Add a tag to the <head> section of the index.html file to link the external style sheet to the
index.html page as follows:
<link rel="stylesheet" href="styles/webdevstyles04.css">
Save both the CSS and HTML file, and open the index.html file in your browser to make sure
the style sheet is linked and the image is floating properly.
5. Add some space between the image and the content that is floated to the right by adding the
following declaration and comment to the .float-right selector:
margin: 0 0 3% 3%; /* 0 top 0 right 3% bottom 3% left */
Add the following declaration and comment to the .float-left selector:
margin: 0 3% 3% 0; /* 0 top 3% right 3% bottom 0 left */
6. Center the content on all of the pages by containing all of the content within the body by
surrounding it with <div id="outer-wrapper"> … </div> tags.
Add a comment after the closing </div> tag to identify that section as follows:
<!--end outer-wrapper-->
Then style the outer-wrapper section in the external style sheet to take up 80% of the available
space on the screen and to center within that space as follows:
#outer-wrapper { width: 80%;
margin: 0 auto 0 auto;
}
7. Add a style to clear the float as follows:
.clear-float { clear: both; }
8. Add class="clear-float" to the first content tag following the <nav> section, which
is probably the <div id="main"> tag unless you have modified your site beyond the previous
chapter’s instructions.
9. Add class="webdev" to the “WebDevPros” paragraph content at the top of each page.
Style the class with a font face, font size, and font color as follows:
.webdev { font-family: "Mission Gothic", "Times New Roman", serif;
font-size: 3em;
color: #0033CC;
}
10. Add a style to the style sheet to bold and change the font color of the <dt> content using the
following style:
dt { font-weight: bold;
color: #0033CC;
}
11. Link your style sheet to any other pages you have created in your WebDevPros website.
12. Add any other styles that you think would improve your WebDevPros webpages.
13. Validate and correct your HTML and CSS files, and submit your assignment in the format
specified by your instructor.
Part 2: You decide to add a horizontal navigation bar to the bottom of each page. Copy the
<ul> content from the <nav> section and paste it inside <footer>…</footer> tags just before the
closing </div> that closes the outer-wrapper section.
Add a style to your style sheet to remove the bullets from the <li> content in the <footer>
section. (Hint: Use a footer li selector.) Also add a style to your style sheet to set the <li> content
in the <footer> section inline.
Save and refresh all of your files. Why is it considered a good practice to add some sort of navigation bar to the bottom of webpages?
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'.