Using CSS for Design Lab 2
Basic CSS Practice

[ This lab is for practice. It will not be graded. ]

Lab Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict Doctype.
• Validate your work using an HTML validator (see Resources page)
• Put any images into a folder called images.
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact me.
• Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
• Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.

Specifics

This lab will give you practice in some of the most common CSS syntax and style properties. We will practice additional style properties as the weeks go on. Follow these specifics to create Lab 2.

• Create a new directory in your CSS web space called week_2 for your Week Two work.
• Create another directory inside the week_2 directory called lab_2. You will be creating a bunch (!) of test XHTML/CSS files for this lab. They should all go in the lab_2 directory.
• Create a new XHTML document called lab_2.html using the XHTML template. Make sure to use the Strict Doctype. Locate this file in the week_2 directory. You will link to all your test files from this master document.
• For each test/ROW below, create a document similar to this DEMO, that uses only valid XHTML 1.0 Strict code and valid embedded CSS as per the directions. For experimentation purposes, you will want to leave some text unstyled but you may want to leave some text untagged as well to see what happens.
• If you need filler text, use the Lorem Ipsum text or create your own from the Resources page link.
• Use the Appendix; CSS Properties and Values at the end of the Stylin' book to look up CSS properties you may not be familiar with.
• Use HTML comments for additional clarification.
• Use appropriate character encoding for the symbols (copyright, etc.) if any.
• Create correctly formed and meaningful ID names to replace the numbers used below.
• Save, test and validate each document (use the Web Dev Tools!). Upload to your web space and link to the lab_2 document from your home page.
• Hint: for better practice, ask yourself what should happen before you test the style (see red examples below). Then, see if you are correct or not.

Each row in the table below is a different lab file/experiment. Each file/row will have different a different look to it based upon the embedded styles dictated in each row of the table.

Properties	Tag(s)	Specifics
Background Properties background color	body h1 ul	yellow red green
color and background color	body h1 ul span within P	bg yellow text black text red bg white bg green text yellow bg blue text purple
background image	body p table	For body, use a textured image For P, use a different textured image For a table, download and use this image
Margin Properties margins general (set document background color to white)	p p id="1" p id="2" p id="3" p id="4"	no style margin 10 pixels background color to FFCCFF margin 20 pixels background color to FFCCFF margin 1 em background color to FFCCFF margin 6 em background color to FFCCFF
Margins specific (set background color to white)	p p id="1" p id="2" p id="3" p id="4" p id="5" p id="6" p id="7" p id="8 p id="9" p id="10"	no style margin left 10 pixels background color to FFCCFF margin left 20 pixels background color to FFCCFF margin left 1 em background color to FFCCFF margin left 6 em background color to FFCCFF margin left margin right 10 pixels background color to FFCCFF margin left margin right 20 pixels background color to FFCCFF margin left margin right 1 em background color to FFCCFF margin left margin right 6 em background color to FFCCFF margin left margin top 6 em background color to blue margin left margin top -3px background color to blue
Text Properties color	body h1 p unstyled text	green orange blue ??????
text align, text decoration, word, letter and line spacing	body h1 p p id="1" p id="2" p id="3" p id="4" p id="5" p id="6" p id="7" p id="8" p id="9"	centered leave unstyled right left and indent ONLY the first line 1/2 inch transform to upper case underline strike-through create a link with no underlining space the letters in this paragraph 1 em apart space the letters in this paragraph .3 inches apart space the words in this paragraph 10 pixels apart space the lines in this paragraph 25 pixels apart
List Properties list types, images and position	ul id="1" ul id="2" ul id="3" ol id="4" ol id="5" ol id="6" ol id="7" ul id="8" ul id="9" ul id="10"	disc circle square decimal markers decimal-leading-zero markers... upper-roman markers... upper-latin (or alpha) markers... download and use this image for the list marker The text in this list should line up with itself on the left side, leaving blank space beneath the bullet. The text in this list should line up with the bullet on the left margin, leaving no blank space beneath the bullet.
Contextual selectors	body p p within div span within P	bg white text black orange brown green