n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

Question

Question

n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapte

HTML 184 HTML Chapter 4 Applying CSS Styles to Webpages rmer ..todays urban cowbey it Figure 4-47 Instructions: Perform the HTML 186 HTML Chapter 4 Applying CSS Styles to Webpages 2 d. Just below the .floatleft style in the CSS file, add the followi

n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. 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
HTML 184 HTML Chapter 4 Applying CSS Styles to Webpages rmer ..today's urban cowbey it Figure 4-47 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 todays 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 lablstyles folder with the name Earmerstyles04.css 3. Enter a CSS comment as the first line of the external style sheet with your name and todays date. Recall that CSS comments are entered within /andcharacters. 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: B8DIEB 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: 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

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

//the given is not clear, As I understand, I am providing the code for HTML file........ I think you already have an HTML file. So just make some changes as I indicated in my code....

<! html code-->

<!DOCTYPE html>

<html>
<head>

   <link rel="stylesheet" href="styles/farmerstyles04.css">
   <title>City Farmer Home Page</title>
</head>
<body>


   <div id="outerwrapper">

       <img src="images/images1.jpg" alt="put your image here" class="floatleft" width="200" height="250">
       <h1>City Farmer
       <h2>...today's urban cowboy</h2>

   
   <nav>

       <ul>
           <li><a href="#">Products</a>
           <li><a href="#">Order</a>
           <li><a href="#">News</a>
           <li><a href="#">Events</a>
       </ul>
   </nav>
   <div id="main">
       <p>image is not clear please add your paragraph here</p>
       <img src="images/images2.jpg" alt="put your image here" class="floatright" height="100" width="250">
       <ol>
           <li>Write here........
           <li>Write here........
           <li>Write here........
           <li>Write here........
           <li>Write here........
           <li>Write here........
       </ol>
   </div>
   
   <footer>
       <p>© Copyright 2019 <br><a href="#">write link</a></p>
   </footer>
   </div>   

</body>
</html>

/** css file **/

/* Write your name
and date here
*/

   /*
   style to apply a uniform black text color,
   a unifor serif font and light - blue
   background color of the body
   */
body{color: #000000;
   background-color: #B8D1EB;
   font-family: "Times New Roman", serif;
}
/*
insert the style to constrain the outerwrapper to 70% of the
widht of the screen and to center the content within the outwrapper
*/

#outerwrapper{width: 70%;
margin: 0 auto 0 auto;
}

/*
Style the text in the footer section to have a font size of 0.75 cm and appear centered by adding
the following styles to the external stylesheet

*/
footer{font-size: 0.75em;
text-align: center;
}

/*
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 sheet
*/
#main{background-color: #C5A98B;
   padding: 10px;
}
/*
Float the image in the header to the left with the following
style to the <h1>,<h2> and <nav> content moves to the right of the
image
*/
/*change the img selector to .floatleft */
.floatleft{float: left;
   margin-right: 3% /*push the content away from the image by adding a
   right margin to the img selector */
}
.floatright{float: right;
   margin-left: 3%
}
/*
Remove the bullets from the list items in the nav section by adding
the following style
*/
ul{list-style-type: none;
}
/*
clear the float so that the content for the div id="main" section starts on the own line by adding
a section style rule with a #main selector
*/
#main, footer{clear: both;
}

//output

City Farmer todays urban cowboy ... Products Order News Events image is not clear please add your paragraph here Copyright 2

//if you need any help regarding this solution ............. please leave a comment ........... thanks

Add a comment

Answer 2

n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

Homework Answers

Add Answer to:
n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

Post as a guest

Earn Coins

2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...

You've been hired to create a website for Eating Well in Season, a business in Glover,...

Apply the following styles: Set the width of the body element to 1000 pixels. Set the...

Could you create a website based on html and css? Details in the below: Note: You...

Can someone please verify if the answers are correct? thanks 1₧Which type of select does the...

1. An _____ lets you place all of your CSS style definitions within one file that...

Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...

Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 Extern...

You will use your text editor to create a table and apply table styles. First, you...

Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...

n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

Homework Answers

Add Answer to: n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

Post as a guest

Earn Coins

Add Answer to:
n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...