Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 108

5. Write the XHTML and CSS code for an embedded style sheet that configures links
without underlines; background color of white; text color of black; is in Arial,
Helvetica, or a sans-serif font; and has a class called new that is bold and italic.
6. Write the CSS code for an external style sheet that configures a page background
color of #FFF8DC ; has a text color of #000099 ; is in Arial, Helvetica, or a sans-serif
font; and has an id called new that is bold and italic.
7. Practice with External Style Sheets. In this exercise you will create two external style
sheet files and a Web page. You will experiment with linking the Web page to the
external style sheets and note how the display of the page is changed.
a. Create an external style sheet (call it format1.css) to format as follows: document
background color of white, document text color of #000099 , and document font
family of Arial, Helvetica, or sans-serif. Hyperlinks should have a background
color of gray ( #CCCCCC ). <h1> elements should use the Times New Roman font
with red text color.
b. Create an external style sheet (call it format2.css) to format as follows: document
background color of yellow, document text color of green. Hyperlinks should
have a background color of white. <h1> elements should use the Times New
Roman font with white background color and green text color.
c. Create a Web page about your favorite movie that displays the movie name in an
<h1> tag, a description of the movie in a paragraph, and an unordered (bulleted)
list of the main actors and actresses in the movie. The page should also have a
hyperlink to a Web site about the movie. Place an e-mail link to yourself on the
Web page. This page should be associated with the format1.css file. Save the
page as moviecss1.html. Be sure to test your page in more than one browser.
Hand in printouts of format1.css, the movieccs1.html source code (print in
Notepad), and the browser display of your moviecss1.html to your instructor.
d. Modify the moviecss1.html page to link to the format2.css external style sheet
instead of the format1.css file. Save the page as moviecss2.html and test it in a
browser. Notice how different the page looks! Hand in printouts of format2.css,
the moviecss2.html source code (print in Notepad), and the browser display of
your moviecss2.html.
8. Practice with the Cascade. In this exercise you will create two Web pages that link
to the same external style sheet. After modifying the configuration in the external
style sheet, you will test your pages again and find that they automatically pick up
the new style configuration. Finally, you will add an inline style to one of the pages
and find that it takes effect and overrides the external style.
a. Create a Web page that includes an unordered list describing at least three
advantages of using CSS. The text CSS Advantages should be contained within
<h1> tags. This page should include a hyperlink to the W3C Web site. Write the
XHTML code so that one of the advantages is configured to be a class called
news . Place an e-mail link to yourself on the Web page. The Web page should
use the external style sheet called ex3.css. Save the page as advantage.html.
b. Create a Web page that includes an unordered list describing at least three disad-
vantages of utilizing Cascading Style Sheets. The text CSS Disadvantages
should be contained within <h1> tags. This page should include a hyperlink to
the W3C Web site. Write the XHTML code so that one of the disadvantages is