Please write these topics as clear headings in your notes. Draw diagrams and give examples where appropriate:

• using divs for logical sections
• styling divs
• styling elements inside divs (descendents)
• shorthand CSS
• creating and styling spans
• styling <a> elements
• pseudo-classes
• the cascade & specificity
  

CSS 4 : Divs and spans

Get Set Up

1. Copy the CSS 4 folder from the Outbox.
2. Paste it into your root folder.
3. Rename it "lastname CSS 4", where lastname is your actual last name.

In the CSS 4 folder, you will find the CSS 4 lesson in PDF format

IMPORTANT STEP!

You will be working on your files from the previous lesson. You must be done with CSS 3 first.

• Open your "lastname CSS 3" folder.
• Right-click on the "lounge" folder and select Copy.
• Navigate into your new "lastname CSS 4" folder.
• Right-click into a blank area and select Paste.

 

Exercises

1. Read pages 429-482 of the Lesson.
2. Complete all the exercises.
3. Check "lounge.css" in W3C's CSS Validator (http://jigsaw.w3.org/css-validator/) .
   1. Ignore the warnings, but fix any and all errors. Then retest. You're good if you don't see a red error badge across the top of your results.
   2. There should be styles defined for body, h1, h2, and #guarantee, #elixirs, #elixirs h2, #elixirs h3, #footer, .cd, .artist, a:link, a:visited, #elixirs a:link, #elixirs a:visited, and #elixirs a:hover.
4. Your final "lounge.html" page should look like the image below.

Turn in Your Files

1. In My Documents, navigate down into your root folder.
2. Right-click on your "lastname CSS 4" folder and select Copy.
3. Navigate to the Inbox.
4. Right-click on the "CSS 4" folder and select Paste.