NHS Designs

Notebook Topics

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

  • line-height: why and how
  • the box model: definitions and how-to
    - content area
    - padding
    - border
    - margin
  • controlling background images
  • border styles
  • the id attribute
  • using multiple style sheets

Web Design
CSS

CSS 3 : The box model

Get Set Up

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

In the CSS 3 folder, you will find

  • A fresh copy of the "Head First Lounge" Web site (lounge folder)
  • The CSS 3 lesson in PDF format

 

Exercises

  1. Read pages 385-424 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.
  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 3" folder and select Copy.
  3. Navigate to the Inbox.
  4. Right-click on the "CSS 3" folder and select Paste.

 


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Natomas High School Design Department