University of Washington, CSE 190M

Lab 2: CSS Design and Layout

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

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

Valid HTML5 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 Chrome. 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 (~5 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:

<h1>Friends</h1>
<ul>
    <li><a href="http://www.cs.washington.edu/190m/">190m Buddies</a></li>
    <li><a href="http://www.willsmith.net/">Big Will</a></li>
    <li><a href="http://youtube.com/watch?v=mZHoHaAYHq8" title="Conan the Librarian">Conan the Librarian</a></li>
</ul>

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 introduces borders with rounded corners.

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!