University of Washington, CSE 190 M

Lab 2: CSS Design and Layout

Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.

original lab idea and code by Victoria Kirst; revised by Brian Le and Marty Stepp

Valid XHTML 1.1 Valid CSS!

Basic lab instructions

Today's lab exercises

Today you'll style a "Victoria's Journal" page. Before you leave, check in with a TA.

  1. Arrange Your Page into Sections
  2. Spacing With Padding and Margins, Backgrounds
  3. Float, Alignment and Clear
  4. Cosmetic Finishing Touches
  5. Upload Your Page to the Web

Exercise : Arrange Page into Sections (~20-25 min)

(The next 3 slides describe this exercise. Please read them all, then start.)

First download the following HTML file. Then open it in your text editor, and also open the HTML page on your hard drive in Firefox. Then move on to the next slide.

Exercise , details

(See example screenshot on next slide.)

Organize journal.html by adding ids, classes, spans and divs. Then, add borders around these sections by editing your layout.css.

The only major changes to make to the HTML are adding ids, classes, divs, and spans.

Exercise , output

Your page should look like this when you are done:

expected output

Exercise : Padding, Margins, Backgrounds (~15 min)

(See example screenshot on next slide.)

Add padding, margins, and backgrounds to the page. Change only your layout.css file.

Exercise , example

This example is Victoria's page with padding/margins and backgrounds:

expected output

Exercise : Float, Align, Clear (~15 min)

(See example screenshot on next slide.)

Now we'll practice float, clear, and alignment. You may have to edit journal.html code as well as layout.css.

Exercise , example

This example is Victoria's page with floating and alignment:

expected output

Exercise : Finishing Touches (~10 min)

(See example screenshot on next slide.)

Exercise , example

This example is Victoria's beautified page:

expected output

Exercise : Put Page on Web (~10 min)

Ask a TA if you have any problems logging in to Webster or uploading your files!

Exercise : 2nd Column, Friends List

(See example screenshot on next slide.)

Add a second column to the layout. Copy and paste the following code into journal.html:

    <li><a href="">190m Buddies</a></li>
    <li><a href="">Big Will</a></li>
    <li><a href="" title="Conan the Librarian">Conan the Librarian</a></li>

Exercise , example

This example is Victoria's page with the friends list:

expected output

Exercise : (h4x0rz only): Yellow highlight

Write your page so that if you hover over any element (i.e. any header, paragraph, image, etc), the element is highlighted in yellow.

This must be a one-selector, one-property addition to your stylesheet -- no commas allowed! How can one rule apply to all elements? Google away! (Tricky.)

Exercise : (h4x0rz only): Rounded borders

The new CSS version 3 will introduce borders with rounded corners. The CSS styles and properties for this won't pass the W3C validator yet, but they are supported in Firefox and Chrome and other browsers.

If you finish them all...

If you finish all the exercises, you can add any other content or styles you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!