NHS Designs

Notebook Topics

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

Web Design

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


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.



  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.

lounge results

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.

resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com