please use notepad ++ or bbedit

Instructions: Perform the following tasks:

1. Open cityfarmer04. htm1 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 tags contain the text City Farmer Home Page.
2. Start a new file in your text editor, and save it in the lab1 \stles 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

tags to surround the content in the wireframe, and then applying styles to center the content within the

and

tags as follows:

1. In cityfarmer04.html, insert the
   opening tag just after the opening tag.
2. In cityfarmer04.html, insert the

closing tag and comment just before the closing 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.

1. 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.)
2. 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; }
3. Float the image in the header to the left with the following style so that the

   , h2>, and

   content moves to the right of the image: img { float: left;

4. Remove the bullets from the list items in the nav section by adding the following style: ul { list-style-type: none; }
5. Push the content away from the image by adding a right margin to the img selector with the following declaration: margin-right: 3%;
6. 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; }
7. 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:

1. Add a class="floatleft" attribute value pair to the first 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.)
2. Add a class="floatright" attribute value pair to the second tag (tomatoes in pots) in the cityfarmer04.html file.
3. 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 447.