Lab 2: Creating an External Style Sheet for Cycle

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 first four webpages of their website and fithe 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.

Instructions: Perform the following tasks:
1. Open the cyclehome04.html, cycleabout04.html, cycleevents04.html, and
cyclefaq04.html fies 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.
2. Start a new file in your text editor, and save it in the lab2\styles folder with the name
cyclestyles04.css
3. Enter a CSS comment as the first line of the external style sheet with your name and today’s date.
4. Enter the styles to apply a uniform black text color, Calibri and sans-serif font, and an orange
(#FF9900) background color to the body.
5. 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 files. 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 apply styles to center the content within the <div> and </div> tags as follows:
a. In each HTML page, insert the <div id="wrapper"> opening tag just after the
opening <body> tag.
b. In each HTML page, insert the </div>  closing tag and
comment just before the closing </body> tag.
c. 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 files 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: Note that a nav section to link to
each of the four pages follows the image on each page.)

9. On the cyclehome04.html and cyclefaq04.html pages, you want to float the image in the header
to the right. On the cycleevents04.html and cycleabout04.html pages, you want to float the
image in the header to the left. Complete these tasks as follows:
a. Create styles in your style sheet with a selector that addresses the class names of floatleft and
floatright. (Hint: A class="floatleft" attribute and value in the HTML document is
referenced by a .floatleft selector in the CSS file.)
b. Add two declarations to both the selectors. The first will float 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 .flooatleft selector would be:
.floatleft { float: left;
margin-right: 2%;
}
Complete the declarations for the .foatright selector to make the image float right and add a 2% margin to the left side.
c. Add class="floatleft" to the opening img tag in the cycleevents04.html
and cycleabout04.html pages.
d. Add class="floatright" to the opening img tag in the cyclehome04.html and cyclefaq04.html pages.
e. Save all files and refresh them in your browser.

11. Remove the bullets from the list items only in the nav section by adding the following style:
nav ul { list-style-type: none;
}
(Hint: In this example, you are using a descendant selector. Only the ul content within the
nav content will be affected.) Save and refresh fles and review them in your browser to make
sure that only the bullets for the ul content within the nav section were removed.)
12. 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:
a. Add class="boldtext" to the opening <p> tag for the five questions immediately
below the <h3>Frequently Asked Questions and Answers </h3> heading in the cyclefaq04.
html file.
b. Add a style in the cyclestyles04.css file to apply bold to the content that is identified by the
boldtext class as follows:
.boldtext { font-weight: bold; }

13. You also decide to bold the dt (definition term) content on the cyclefaq04.html page. Given
you already have a declaration to apply bold, change the selector to include both the content
identified by the boldtext class as well as the content marked up by the dt tag as follows:
.boldtext, dt { font-weight: bold; }
14. Validate your four HTML pages and fix any errors.
15. Validate your CSS code and fix any errors.
16. Save and open the pages within a browser as shown in Figures 4– 48, 4 – 49, 4 – 50, and 4– 51.
17. Submit your assignment in the format specified by your instructor.
18. Compare the selector of nav ul (step 11) to the selector of .boldtext, dt
(step13). One contains a comma and one does not. What is the significance of the comma?
(Hint: Search for information on CSS grouping selectors and descendant selectors.)

The Tradition of Sharing

Help your friends and juniors by posting answers to the questions that you know. Also post questions that are not available.

Why should I post the question or an answer?

Question