Lab 4: Cascading Style Sheets

Student Learning Objectives

After completion of this lab assignment, you should have demonstrated the ability to

Use HTML-Kit to create an externally-linked cascading style sheet
Demonstrate the use of the new CSS rules to format
- colors
- margins and padding
- borders
- fonts
- text alignment
Re-use the XHTML code from Lab3, linked to your CSS file, to demonstrate the separation of content from style
Use the W3C CSS Validation Service (use the actions toolbar online tab within HTML-Kit) to eliminate all CSS warnings and errors
Use comments, meta tags, and Tidy within HTML-Kit to create Web and CSS files that conforms to the CS 350 Coding Standards

Assignment

Create a new folder on your U:\ drive named Lab4
- Folder Lab4 will contain both your index.html Web page file and your lab4.css style sheet file
Copy your U:\Lab3\index.html file into U:\Lab4 folder. Fix any problems in the XHTML code identified by the grader
Use XHTML-Kit to create a cascading style sheet and save it as lab4.css in folder U:\Lab4
Modify U:\Lab4\index.html so that it links to your external stylesheet lab4.css style sheet for formatting
Use HTML-Kit's bsStyle plugin to specify the CSS rules to format the Lab 4 Web page as shown in the screen snapshot below
- Set the page's body background color to lavender, the color of the text to black, a default font size of 90%, and the font family set to Verdana, sans-serif. Set the overall page margins to 5% of the page width
- Set the heading 1 tag to display with its text center-aligned, a font size of 150% and the font-family set to monospace
- Set the heading 2 tag to display with the background color of linen and the font's color set to dark green. Display the font at size 175%
- Set the heading 3 and the address text to display in all uppercase letters
- Set the text inside a strong element to display in a bold red font with a yellow background
- Set the block quote to display with a 5px solid red border, a background color of grey, a text color of white, and its left and right padding set to 1em
- Set the table's caption to display with a bold, italic font
- Set the table's head section to display with a the background-color of navy and the text color of white
- Set the table's footer section to display with a the background-color of white, the text color of navy, and the text centered aligned.
Remember:
- All formatting of Lab 4 Web page should by specified by rules in the externally linked lab4.css style sheet, not in the XHTML code.
- Use hexadecimal values for the colors, do not use the color names given above.
  - Tip: Use HTML-Kit's Colors button found under the Tools action tab

Refer to Dave Raggett's Adding a touch of style tutorial for a refresher on CSS. Check other online CSS references as well.

To Receive Credit

Print out and staple together two printouts in the order below:
- your Web Page as displayed in a browser (Firefox or IE 7.0)
- your lab4.css style sheet
Save your style sheet as lab4.css and your XHTML page as index.html in folder U:\Lab4 in your cs350 account.

Grading Criteria

Labs will be graded on a scale of 0 to 10:
- 10 Excellent, Page displays perfectly in a browser, CSS code validates correctly without errors or warnings, XHTML validates correctly as XHTML Strict 1.0, and no problems detected in CSS or XHTML code
- 9 Very well done: CSS and XHTML validate correctly but one minor problem with the page display. For example,
  - not italicizing the table caption
- 8 Well done: CSS and XHTML validate correctly, but two problems with the page display
- 7 Acceptable: One or two validation errors or warnings in the CSS or XHTML code
- 6 Problems: Three or more problems with the page display or validation
- 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone
- 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score

Screen Snapshot

Screen Snapshot of Lab 4