Lab 3: 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 encouraged highly to work with a partner. If you understand CSS, sharing your knowledge with someone else will benefit both you and your partner. Make sure each partner's name is given to TA, or in the Dropbox comments. Only turn in one submission per team. No points will be taken off for not working with a partner, but my next lab points will be taken off.

Preliminaries

• On a thumb drive, personal drive, or Z drive create a directory named lab3. 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 3: CSS. View the source of this file and save it to a file named index.html that is located in the Lab3 directory.
• Create a subdirectory in Lab3 named css.
• Create a subdirectory in Lab3 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(230,230,190) but make sure you convert this to hex like I did in class, and the H1 should also be centered.
• 2 points. All level 2 header text, <h2>, should appear as serif text that is 30 pixels high, has a background color of #ff0000, 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 prettyPattern.gif and store it in the images subdirectory.
• 1 point. The spacing between each word that appears after a bullet in a list is 10 pixels. I showed this, and everything else on here in class.
• 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 yellow, be in all uppercase letters, not be underlined, and have a background color of rgb(255,255,150) in hex.
• 1 point. Any text that is bold, <b>, in the original html document should be blue in color. I mentioned in class the bold tag should not be in the HTML but I put it in there to show you it's possible, but wrong.
• 1 point. The index.css file validates.
• 1 point. The expected directory structure is correct.

Useful Resources

• Background Pattern - right click on it and save image as....call it prettyPattern.gif
• CSS Validator
• CSS Reference

Submission

If you finish this lab before the end of class you should have your TA grade this lab before you leave. If you need to turn in the lab later you have to get permission from the TA, you must show your TA progress to get permission. If you're at home and do not show up to lab you can not turn in your lab on D2L. You only need to upload the .css file to the "Lab 3 Upload" in the Assignments section on D2L. Make sure you include your partners name in the comments. No late assignments will be accepted, get it turned in.