n241: CSS Gone Wild

CSCI N241: Internet Applications

CSS Gone Wild

Goals

By the end of this lab you should understand ...

... how to create an external style sheet.
... how to link an external style sheet to a web page.
... how to create & implement a style class.
... how to validate an external style sheet.

Lab Directions

In this lab, you will create an external style sheet and apply that stylesheet to several supplied files from your text. Specifically, you will be working with the lounge.html, directions.html and elixir.html files illustrated on page 309 of Head First Chapter 8. Use the following guidelines when you create your stylesheet:

Create a sub-directory inside your n241 directory cssWild.

Consult Head First Chapter 8 (Getting Started with CSS). Click on the HTML files below, and once loaded, do a view source to save the HTML. Cick on the picture files, and once loaded, right click to save the pictures.

HTML Files	Images
lounge.html	drinks.gif
elixir.html	red.jpg
directions.html	blue.jpg
	lightblue.jpg
	green.jpg

Validate all the html files through the validator (files should already be valid), and insure you can view the pages, traversing links from the directions and elixir pages on your local machine.
Open a programmer's text editor (like syn Text Editor, Notepad++ or jEdit). Create a stylesheet file called loungesite.css and add the following style rules to your stylesheet:
- Add a rule to change the background color for the <body> element.
- Add a rule to change the text color for the <body> element.
- Add a rule to change the font-family for the <body> element.
- Add CSS classes to your .html file and stylesheet so that each elixir text on the Elixirs html page is an appropriate color (see page 335 of your text).
- Add at least one rule that applies to more than one selector/element. Be sure to separate the multiple selector/elements with commas. You may utilize the example in your text that sets h1 and h2 to the same color.
- Add at least one rule that overrides an inherited style. You might choose to change the text color for the em tag on the HeadFirstLounge file.
- Add at least one rule that specifies font size for the <body> element.
- Add at least one additional rule that specifies a different font size for another element, using a measure other than pixels
- Add a rule that specifies a bottom border for h1 elements, make the border 1px big, solid and black
- Dealer's choice: Add a style rule for one of the following: font weight, text decoration, font style
- Use a style color style rule using a key reserved color word, and another color rule in hex
- You may add other styles, as you wish.
- Comment your rules and explain their purpose. For example, in a comment, point out that a particular stylerule satisfies the lab requirement of overriding an inherited style. Remember NOT to use HTML comments! Your comments should use the following format:
  /*
  This is a comment written in CSS syntax.
  */
- Check that your stylesheet validates without error by running it through the W3C's CSS Validator:
  http://jigsaw.w3.org/css-validator/
- Use the <link /> element to link your stylesheet to the lounge, elixir and directions HTML pages and update tags that use your classes, accordingly.

Re-validate all your HTML files by once again running them through the validator.
Upload your loungesite.css file to your public_html/n241/cssWild/ directory. Upload the three HTML files (lounge, elixir and directions), as well as all picture files (drinks, red, blue, lightblue and green) to your n241 subdirectory cssWild.
Update your class home page (index.html in your n241 folder) page to reflect a link to your complete lounge.html lab.
Test your site (including all links).Make needed changes.