Lab 5: CSS

Purpose

The purpose of this lab is to give you hands-on experience with external CSS (Cascading Style Sheets) stylesheets. You should use a text editor such as Notepad++ to do this assignment.

Partners

Everyone is required to work with a partner. If you understand CSS, sharing your knowledge with someone else will benefit both you and your partner.

Preliminaries

• Create a directory named lab5. Pull up today's lab web page in a separate tab by control-clicking on this link. You will know you have done this correctly if the tab's title is Lab 5: CSS. View the source of this file and save it to a file named index.html that is located in the lab5 directory.
• Create a subdirectory in lab5 named css.
• Create a subdirectory in lab5 named images.
• Notice that there is an external stylesheet link in index.html that references a file named index.css that is located in the css subdirectory.

Requirements and Grading - 10 points

The following requirements should all be accomplished by modifying the index.css stylesheet. Do not modify the index.html document.

• 1 point. All level 1 header text, <h1>, should appear as sans-serif text that is 50 pixels high, has a background color of rgb(255,255,150) and is centered.
• 2 points. All level 2 header text, <h2>, should appear as serif text that is 25 pixels high, has a background color of #0000ff, is italicized, is in the small-caps font variant and has a 5 pixel spacing between each character.
• 1 point. The background image takes up the whole page and is a repeated version of the pattern listed in the Useful Resources section below. Name this image pattern_096.gif and store it in the images subdirectory.
• 1 point. The spacing between each word that appears after a bullet in a list is 5 pixels. Hint: use the CSS Reference link below to find the desired Text Property to do this.
• 1 point. All paragraph text, <p>, has a line above it and a font weight of 900.
• 1 point. When the cursor is placed above a hypertext link, the text of the link should turn red, be in all uppercase letters, not be underlined, and have a background color of rgb(255,255,150).
• 1 point. Any text that is bold, <b>, in the original html document should be blue in color.
• 1 point. The index.css file validates.
• 1 point. The expected directory structure is correct.

Useful Resources

• Background Pattern - use the one in the top row on the far right
• CSS Validator
• CSS Reference

Submission

E-mail a copy of your index.css document to your technical TA (Adib or Nathan) no later than the end of your lab period. The subject of the e-mail should be Web Design, Lab 5, your name, your partner's name. Late assignments will not be accepted. However, partial credit can be earned for completing any of the above tasks before your lab period ends.