Lab 2: Creating an External Style Sheet for Cycle Out Cancer Problem: You are part of a philanthropic group of motorcyclists, Cycle Out Cancer, who participate in community -

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-sufciency. 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 Chapter 4

HTML HTML Chapter 4 “QQMZJOH $44 4UZMFT UP 8FCQBHFT

Instructions: Perform the following tasks:

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.

Start a new le in your text editor, and save it in the lab1\styles folder with the name

farmerstyles04.css

Enter a CSS comment as the rst line of the external style sheet with your

your name and today’s

name and today’s

your

date. Recall that CSS comments are entered within /* and */ characters.

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;

}

In the head section of the cityfarmer04.html le, 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 le. 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.

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:

In cityfarmer04.html, insert the <div id=”outerwrapper”> opening tag just after the

opening <body> tag.

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.

Figure 4–47

STUDENT ASSIGNMENTS

WJPMFULBJQB4IVUUFSTUPDLDPN ª $FEBSDIJT$PDJSFEF’

“QQMZJOH $44 4UZMFT UP 8FCQBHFT HTML Chapter 4 HTML

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.

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

(

Hint

(

: Save and refresh the cityfarmer04.html le in your browser after every step to observe

and study the impact of each style.)

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;

}

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;

}

Remove the bullets from the list items in the nav section by adding the following style:

ul { list-style-type: none;

}

Push the content away from the image by adding a right margin to the img selector with the

following declaration:

margin-right: 3%;

Clear the oat 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;

}

You decide to oat the second image right instead of left. Right now, your oat rule is written

using the img selector so all img content is affected. To change the oat value for the second

image, complete the following:

Add a class=”floatleft” attribute value pair to the rst <img> tag (the logo) in the

cityfarmer04.html le. (

Hint

cityfarmer04.html le. (

Hint

cityfarmer04.html le. (

: 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 rst so the class=”oatleft” attribute would often be listed second or third.)

Add a class=”floatright” attribute value pair to the second <img> tag (tomatoes in

pots) in the cityfarmer04.html le.

In the farmerstyles04.css le, change the img selector to .floatleft

HTML Chapter 4

HTML HTML Chapter 4 “QQMZJOH $44 4UZMFT UP 8FCQBHFT

Just below the .oatleft style in the CSS le, add the following style to oat the second

image to the right:

.floatright { float: right;

margin-left: 3%;

}

Save both les and then refresh cityfarmer04.html in your browser.

To make sure the footer also starts on its own line, modify the selector for the rule that clears

all oat to include both the #main and footer areas as follows:

#main, footer { clear: both;

}

Validate your HTML code and x any errors.
Validate your CSS code and x any errors.
Save and open the cityfarmer04.html page within a browser as shown in Figure 4–47.
Submit your assignment in the format specied by your instructor.

In step 13, you inserted class=”oatleft” and class=”oatright” attributes in your HTML

page instead of id=”oatleft” and id=”oatright”. Why?

Lab 2: Creating an External Style Sheet for Cycle Out

Cancer

Problem: You are part of a philanthropic group of motorcyclists, Cycle Out Cancer, who

participate in community events and parades to distribute cancer awareness information. You have

created content for the rst four webpages of their website and updated the links in the nav

section for each page. In this exercise you will create an external style sheet and link it to the four

pages as shown in Figures 4–48 through 4–51.

Figure 4–48

STUDENT ASSIGNMENTS

“QQMZJOH $44 4UZMFT UP 8FCQBHFT HTML Chapter 4 HTML

Figure 4–49

Figure 4–50

HTML Chapter 4

STUDENT ASSIGNMENTS

ª +JN 1SVJUU4IVUUFSTUPDLDPN

HTML HTML Chapter 4 “QQMZJOH $44 4UZMFT UP 8FCQBHFT

Instructions: Perform the following tasks:

Open the cyclehome04.html, cycleabout04.html, cycleevents04.html, and

cyclefaq04.html les in your HTML editor from the Data Files for Students and then

modify the comment at the top of each page to include your name and today’s date.

Start a new le in your text editor, and save it in the lab2\styles folder with the name

cyclestyles04.css

Enter a CSS comment as the rst line of the external style sheet with your

name and today’s

your

your name and today’s

date.

Enter the styles to apply a uniform black text color, Calibri and sans-serif font, and an orange

(#FF9900) background color to the body.

In the head section of each of the four cycle HTML documents, enter an element to

connect the page to the external style sheet.

Save and then open or refresh each page in a browser to make sure that the stylesheet is

correctly connected to the HTML les. 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.

Figure 4–51

STUDENT ASSIGNMENTS

“QQMZJOH $44 4UZMFT UP 8FCQBHFT HTML Chapter 4 HTML

Center the content by adding <div> and </div> tags to surround the content in the wireframe,

and then apply styles to center the content within the <div> and </div> tags as follows:

In each HTML page, insert the <div id=”wrapper”> opening tag just after the

opening <body> tag.

In each HTML page, insert the </div> <!–close the wrapper–> closing tag and

comment just before the closing </body> tag.

In cyclestyles04.css, add the styles to constrain the wrapper to 80% of the width of the

window and to center the content within the wrapper.

Save all les and then open or refresh the pages in a browser to make sure that the content

is centered within 80% of the browser window. (

Hint

is centered within 80% of the browser window. (Hint

is centered within 80% of the browser window. (

: Note that a nav section to link to

each of the four pages follows the image on each page.)

On the cyclehome04.html and cyclefaq04.html pages, you want to oat the image in the header

to the right. On the cycleevents04.html and cycleabout04.html pages, you want to oat the

image in the header to the left. Complete these tasks as follows:

Create styles in your style sheet with a selector that addresses the class names of oatleft and

oatright. (

Hint

oatright. (Hint

oatright. (

: A

class=”floatleft” attribute and value in the HTML document is

referenced by a .floatleft selector in the CSS le.)

Add two declarations to both the selectors. The rst will oat the content either left or

right. The second will add a 2% margin to the inside edge of the content. For example, the

declarations for the .oatleft selector would be:

.floatleft { float: left;

margin-right: 2%;

}

Complete the declarations for the .oatright selector to make the image oat right and add

a 2% margin to the left side.

Add class=”floatleft” to the opening img tag in the cycleevents04.html

and cycleabout04.html pages.

Add class=”floatright” to the opening img tag in the cyclehome04.html and

cyclefaq04.html pages.

Save all les and refresh them in your browser.
Remove the bullets from the list items only in the nav section by adding the following style:

nav ul { list-style-type: none;

}

(Hint

(

Hint

(

: In this example, you are using a descendant selector. Only the ul content within the

nav content will be affected.) Save and refresh les and review them in your browser to make

sure that only the bullets for the ul content within the nav section were removed.)

Create one more class named boldtext for the questions on the cyclefaq04.html page as

follows so that you can style the questions in bold:

Add class=”boldtext” to the opening <p> tag for the ve questions immediately

below the <h3>Frequently Asked Questions and Answers </h3> heading in the cyclefaq04.

html le.

Add a style in the cyclestyles04.css le to apply bold to the content that is identied by the

boldtext class as follows:

.boldtext { font-weight: bold; }

HTML Chapter 4

HTML HTML Chapter 4 “QQMZJOH $44 4UZMFT UP 8FCQBHFT

You also decide to bold the dt (denition term) content on the cyclefaq04.html page. Given

you already have a declaration to apply bold, change the selector to include both the content

identied by the boldtext class as well as the content marked up by the dt tag as follows:

.boldtext, dt { font-weight: bold; }

Validate your four HTML pages and x any errors.
Validate your CSS code and x any errors.
Save and open the pages within a browser as shown in Figures 4–48, 4–49, 4–50, and 4–51.
Submit your assignment in the format specied by your instructor.

Compare the selector of nav ul (step 11) to the selector of .boldtext, dt

(step 13). One contains a comma and one does not. What is the signicance of the comma?

(

Hint:

(

(Hint:

Search for information on CSS grouping selectors and descendant selectors.)