NHS Designs

Web Design
CSS

CSS 1 : Getting started with CSS

Get Set Up

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

In the CSS folder, you will find

  • A fresh copy of the "Head First Lounge" Web site (lounge folder)
  • A file called "style.css"
  • The CSS lesson in PDF format

 

Exercise 1 [p.291-293]

  1. Read pages 285-293 of the Lesson.
  2. Open "lounge.html" in Notepad.
  3. Add the <style> element inside the <head> element.
  4. Add the CSS inside the <style> element which makes all the <p> elements maroon in color.
  5. Save and test "lounge.html" in the browser.

 

Exercise 2 [p.294-296]

  1. Read pages 294-296 of the Lesson.
  2. Open "lounge.html" in Notepad.
  3. Add the CSS for the <h1> and <h2> elements in the <style> element.
  4. Add the CSS to make just the <h1> element have a bottom border.
  5. Save and test "lounge.html" in the browser.

 

Exercise 3 [p.304-307]

  1. Read pages 297-307 of the Lesson.
  2. Create a new file in Notepad (File > New).
  3. Save it as "lounge.css" in your "lastname CSS" folder.
  4. Type, or copy-and-paste the CSS rules from your "lounge.html" file into your new "lounge.css" file. Do not copy the <style> and </style> tags.
  5. Save "lounge.css".
  6. Open "lounge.html" in Notepad.
  7. Delete the <style> element, including the <style> and </style> tags plus everything in between.
  8. Put in its place the <link> element which connects this page ("lounge.html") to your new external style sheet ("lounge.css").

<link type="text/css" rel="stylesheet" href="lounge.css" />

  1. Put the <link> element into the <head> for "elixir.html" and "directions.html" too.
  2. Save and test all three pages in the browser.

 

Exercise 4 [p.312-314]

  1. Read pages 308-315 of the Lesson.
  2. Open up "lounge.css" in Notepad.
  3. Add a new rule for the <body> element that makes it sans-serif.
  4. Delete the font-family property from the h1, h2 rule and the p rule.
  5. Add a new rule for the <em> element that sets the font-family to serif.
  6. Save and test "lounge.html" in the browser.

 

Exercise 5 [p.317-320]

  1. Read pages 316-320 of the Lesson.
  2. Open up "elixir.html" in Notepad.
  3. Add the class "greentea" to the first <p> element.
  4. Save "elixir.html".
  5. Open up "lounge.css" in Notepad.
  6. Add a new rule for a "greentea" class which makes the text green.
  7. Save "lounge.css". Test "elixir.html" in the browser.

 

Exercise 6 [p.327-329] - This is worth 40% of the grade!

  1. Read pages 321-331 of the Lesson.
  2. Open up the file "style.css" in Notepad (it is directly inside your "lastname CSS" folder.)
  3. This CSS file has eight errors in it. Locate and fix all the errors.
  4. Check "style.css" in W3C's CSS Validator (http://jigsaw.w3.org/css-validator/) .
  5. Check the stylesheet for the lounge ("lounge.css") in the validator too.
  6. 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.

 

Turn in Your Files

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

 

Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

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