NHS Designs

Web Design
CSS

CSS 2 : Styling with fonts and colors

Get Set Up

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

In the CSS 2 folder, you will find

  • A fresh copy of the "Segway'n USA " Web site (journal folder)
  • The CSS 2 lesson in PDF format

 

Exercise 1 [p.349-350]

  1. Read pages 341-350 of the Lesson.
  2. Create a new file in Notepad. Save it as "journal.css" in the "journal" folder in your "lastname CSS 2" folder.
  3. Add the body rule and save the file.
  4. Open "journal.html" in Notepad.
  5. Add the <link> tag inside the <head> element.

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

  1. Save and test "journal.html" in the browser.

 

Exercise 2 [p.356-357]

  1. Read pages 351-357 of the Lesson.
  2. In "journal.css", add the font-size property to the body rule.
  3. Create two new rules for h1 and h2.
  4. Save "journal.css", and test "journal.html" in the browser.

 

Exercise 3 [p.359-360]

  1. Read pages 358-360 of the Lesson.
  2. In "journal.css", create an h1, h2 rule and set the font-weight property for it.
  3. Save "journal.css", and test "journal.html" in the browser.

 

Exercise 4 [p.362]

  1. Read pages 361-362 of the Lesson.
  2. In "journal.css", create a blockquote rule and set the font-style property for it.
  3. Save "journal.css", and test "journal.html" in the browser.

 

Exercise 5 [p.375-376]

  1. Read pages 363-376 of the Lesson.
  2. In "journal.css", add the color and text-decoration properties to the h1, h2 rule.
  3. Save "journal.css", and test "journal.html" in the browser.

 

Exercise 6 [p.378]

  1. Read pages 377-379 of the Lesson.
  2. In "journal.css", delete thetext-decoration properties from the h1, h2 rule.
  3. Add the border-bottom property to the h1, h2 rule.
  4. Save "journal.css", and test "journal.html" in the browser.

 

Exercise 6 - This is worth half the grade!

  1. Check "journal.css" in W3C's CSS Validator (http://jigsaw.w3.org/css-validator/) .
  2. 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 2" folder and select Copy.
  3. Navigate to the Inbox.
  4. Right-click on the "CSS 2 " folder and select Paste.

 

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

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