Question
Styling a Webpage
Instructions: In this exercise, you will use your text editor to create external, embedded, and
inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of
the semantic wireframe ( header, nav, main, and footer ) and a div element that surrounds all
of the content to center the content on the page. You will also float an image to the left so that
some of the content can fill the empty space to the right of the image. Finally, you will clear the
float and add margins and borders to give your page a professional touch. The completed home
page is shown in Figure 4–44. You will also use professional web development practices to indent,
space, comment, and validate your code.
Perform the following tasks:
1. Open your text editor, and then open the apply04.html file from the Data Files for Students. Use
the File Save As feature to save the webpage in the chapter04\apply folder with the name
index04.html to create the home page.
2. Modify the comment at the top of the index.html page to include your name and today’s date.
3. Start a new fie in your text editor, and save it in the chapter04\apply folder with the name styles04.css
to create a style sheet.
4. Enter a CSS comment as the first line of the external style sheet with your name and today’s
date. Recall that CSS comments are entered within /* and */ characters.
5. Style the body element with a uniform black text color and light-green background color:
body { color: #000000;
background-color: #D9F1C1;
}
6. In the head section of the index04.html file, enter an element to connect the page to the
external style sheet:
<link rel="stylesheet" href="styles04.css">
Save your changes. Open or refresh index04.html in a browser to make sure that the style
sheet is correctly connected to the HTML file.
7. Your next task is to center the content on the webpage. To do this, add <div> tags to
surround the content in the wireframe, and then apply a style to center the content
within the <div> tags as follows:
a. In index04.html, insert the <div id="outerwrapper"> opening tag just after the
opening <body> tag.
b. In index04.html, insert the </div> <!--close the outerwrapper--> closing tag
and comment just before the closing </body> tag.
c. In styles04.css, insert the following declarations to constrain the outerwrapper
to 80% of the width of the screen and to center the content within the outerwrapper:
#outerwrapper { width: 80%;
margin: 0 auto 0 auto;
}
d. Save your changes to both files, and then open or refresh index04.html in a browser
to make sure that the content is centered within 80% of the browser window.
8. Apply common sans-serif fonts to the header, nav, and footer sections, and common serif
fonts to the div id="main" section by adding the following style to the external stylesheet:
header, nav, footer { font-family: Calibri, Arial, sans-serif;
}
#main { font-family: Garamond, "Times New Roman", serif;
}
(Hint: After each step, save index04.html and styles04.css and then refresh index04.html in the
browser to make sure that each style is applied successfully.)
9. Style the text in the footer section to be 0.75em and centered by adding the following
styles to the external stylesheet:
footer { font-size: 0.75em;
text-align: center;
}
10. Style the content within the div id="main" section to have a lighter background and 10px
of padding on all four sides by adding the following declarations to the existing #main selector:
background-color: #F0F9E6;
padding: 10px;
11. Float the image to the left with the following style so that the existing h1 and h2 content
moves to the right of the image:
img { float: left;
}
12. Clear the float for the nav section with the following style:
nav { clear: both;
}
13. Add a margin to the left of the h1 and h2 content in the nav section to insert white
space between the headings and the image. Given you want to apply the same rule
to twospecific headings (but not other h1 and h2 content on the website), you will
first give the tags the same class attribute value and then apply the style to that class
as follows:
a. In index04.html, insert class="addrightmargin" to the opening <img> tag in the
header section.
b. In styles04.css, insert the following style to increase the size of the right margin for content
tagged with class="addrightmargin"
.addrightmargin { margin-right: 2%;
}
14. In index04.html, insert an embedded style sheet just below the link tag in the head section
to apply a rounded border to the div id="main" section:
<style>
#main { border-radius: 2em; }
</style>
15. In index04.html, insert <span> and </span> tags around “Smoky quartz” and “Soulmate
Crystal” in the first list item in the unordered list in the div id="main" section. Use the
style attribute to give each opening <span> tag an inline style that bolds the font of the
content within the <span> tags as follows:
<span style="font-weight:bold;">"Smoky quartz"</span>
<span style="font-weight:bold;">"Soulmate Crystal"</span>
16. Validate your HTML document using the W3C validator at validator.w3.org and fix any
errors that are identifid. Validation is complete when the validator returns the message “This
document was successfully checked as HTML5!” in a green bar near the top of the webpage.
17. Add indents, spaces, and extra lines to your external style sheet to make it as professional and
easy to read as possible. Employ these conventions:
• Put the selector and opening brace on the first line. Alternatively, put the selector, opening
brace, and first declaration on the first line.
• Add second and subsequent declarations on their own lines.
• Make sure that each property is separated from its value with a colon (:)
• Make sure that there are no spaces in values such as 10px or 20%.
• Make sure that each declaration ends with a semicolon (;)
• For each set of styles, position the closing brace on its own line
• Add a blank line before each new selector line.
18. Validate your CSS file using the W3C validator at http://jigsaw.w3.org/css-validator/ and fix
any errors that are identified. Validation is complete with the validator returns the message
“Congratulations! No Error Found.”
19. Submit the index04.html and styles04.css files in a format specfied by your instructor.
Your instructor may also ask you to submit the wirewrap01.jpg file used with index04.html.
20. In this exercise you applied linked, embedded, and inline styles to style a home page.
Use your experiences and research the web to answer these questions:
a. In step 7, you entered a comment <!--close the outerwrapper--> after the closing </div> tag.
Why is a comment especially useful after a closing </div> tag?
b. What is the primary advantage of using an external versus embedded style sheet for the
majority of your website styles?
c. In step 15, two <span> tags were given the same inline style. Why would you use inline styles
versus embedded or external styles?
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'.