Question
Lab 1: Creating an External Style Sheet for City Farmer
Problem: You work for a local but rapidly growing gardening supply company called City Farmer
that specializes in products that support food self-sufficiency. The company has hired you to help
create the home page. The content for the home page is in place, but it needs to be styled. Style the
webpage shown in Figure 4–47 with an external style sheet.
Instructions: Perform the following tasks:
1. Open cityfarmer04.html in your HTML editor from the Data Files for Students and
then modify the comment at the top of the page to include your name and today’s date.
Make sure the <title>…</title> tags contain the text City Farmer Home Page.
2. Start a new file in your text editor, and save it in the lab1\styles folder with the name
farmerstyles04.css
3. 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.
4. Enter a style to apply a uniform black text color, a uniform serif font, and light-blue
background color to the body:
body { color: #000000;
background-color: #B8D1EB;
font-family: "Times New Roman", serif;
}
5. In the head section of the cityfarmer04.html file, enter an element to connect the page to
the external style sheet:
<link rel="stylesheet" href="styles/farmerstyles04.css">
Save your changes, and then open or refresh cityfarmer04.html in a browser to make sure that
the style sheet is correctly connected to the HTML file. Note that in this exercise, the style
sheet is saved in the styles folder, so that path needs to be included in the href value.
6. Center the content by adding <div> and </div> tags to surround the content in the wireframe,
and then applying styles to center the content within the <div> and </div> tags as follows:
a. In cityfarmer04.html, insert the <div id="outerwrapper"> opening tag just after the
opening <body> tag.
b. In cityfarmer04.html, insert the </div> <!-- close the outerwrapper--> closing
tag and comment just before the closing </body> tag.
Save your changes to cityfarmer04.html.
c. In farmerstyles04.css, insert the following style to constrain the outerwrapper to 70% of the
width of the screen and to center the content within the outerwrapper:
#outerwrapper { width: 70%;
margin: 0 auto 0 auto;
}
Save your changes to farmerstyles04.css, and then open or refresh cityfarmer04.html in a
browser to make sure that the content is centered within 70% of the browser window.
7. Style the text in the footer section to have a font size of 0.75em and appear centered by adding
the following styles to the external stylesheet:
footer { font-size: 0.75em;
text-align: center;
}
(Hint: Save and refresh the cityfarmer04.html file in your browser after every step to observe
and study the impact of each style.)
8. Style the content within the div id="main" section to have a light-brown background and
10px of padding on the top by adding the following style:
#main { background-color: #C5A98B;
padding: 10px;
}
9. Float the image in the header to the left with the following style so that the <h1>, <h2>, and
<nav> content moves to the right of the image:
img { float: left;
}
10. Remove the bullets from the list items in the nav section by adding the following style:
ul { list-style-type: none;
}
11. Push the content away from the image by adding a right margin to the img selector with the
following declaration:
margin-right: 3%;
12. Clear the float so that the content for the div id="main" section starts on its own line by
adding a second style rule with a #main selector:
#main { clear: both;
}
13. You decide to float the second image right instead of left. Right now, your float rule is written
using the img selector so all img content is affected. To change the float value for the second
image, complete the following:
a. Add a class="floatleft" attribute value pair to the first <img> tag (the logo) in the
cityfarmer04.html file. (Hint: The order of attribute value pairs in the opening html tag do
not affect how the code works in the browser, but typically the most important attributes are
listed first so the class="floatleft" attribute would often be listed second or third.)
b. Add a class="floatright" attribute value pair to the second <img> tag (tomatoes in
pots) in the cityfarmer04.html file.
c. In the farmerstyles04.css file, change the img selector to .floatleft
d. Just below the .floatleft style in the CSS file, add the following style to float the second
image to the right:
.floatright { float: right;
margin-left: 3%;
}
Save both files and then refresh cityfarmer04.html in your browser.
14. To make sure the footer also starts on its own line, modify the selector for the rule that clears
all float to include both the #main and footer areas as follows:
#main, footer { clear: both;
}
15. Validate your HTML code and fix any errors.
16. Validate your CSS code and fix any errors.
17. Save and open the cityfarmer04.html page within a browser as shown in Figure 4–47.
18. Submit your assignment in the format specified by your instructor.
19. In step 13, you inserted class="foatleft" and class="foatright" attributes in your HTML
page instead of id="floatleft" and id="floatright". Why?
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'.