Web Programming Step by Step
Lab 2: CSS Design and Layout

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

The purpose of this lab is to practice writing Cascading Style Sheets to control the appearance and layout of a web page.

Lab 2 Resources

Victoria's Journal Web Page

You are given a file named journal.html (right-click and select Save Link As...) that represents a page from Victoria's journal. You are to write a stylesheet called journal_layout.css that will transform the layout in different ways throughout the following exercises.

To help you out, you are also given a file named journal_basic.css that defines some basic styles for this page, and it is already linked for you in the file already.
You do not have to edit this provided stylesheet or the link; just edit the journal_layout.css that you're writing.

Exercises for Today:

  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
  6. Add 2nd Column: Friends List
  7. Make Your Journal Annoying w/ Hover

Exercise 1: Arrange Your Page into Sections (roughly 20 minutes)

The first task is to organize journal.html by adding ids, classes, spans and divs as seen in lecture. Then, add "boxes" around these sections of the website by adding to your journal_layout.css stylesheet.

Hint: Remember the way to define a border in CSS:
border: thickness color style;

For example, the following gives a yellow, dashed, 1px-thick border:

border: 1px yellow dashed;

You are going to match the output below (between, but not including, the thick black lines).


expected output


The only major changes you should need to make to the XHTML code are adding ids, classes, divs, and spans. You may also change the text of the journal if you like, such as changing it to your name or rewording the journal entries. But please don't spend a large amount of time doing this, so you can move on to the later exercises.

Exercise 2: Spacing With Padding and Margins, Backgrounds (roughly 15 minutes)

You are now going to add padding, margins, and backgrounds to some of the parts you defined in Exercise 1. You should only have to change your journal_layout.css file, if you completed Exercise 1 correctly.

You are going to match the output below (between, but not including, the thick black lines).


expected output


Exercise 3: Float, Alignment and Clear (roughly 15 minutes)

Now you're going to practice float, clear, and alignment on the web page. Part of this exercise is understanding the difference between aligning and floating an element. You may have to edit your journal.html code as well as your journal_layout.css stylesheet to get the floats working properly.

You are going to match the output below (between, but not including, the thick black lines).


expected output


Exercise 4: Cosmetic Finishing Touches (roughly 10 minutes)

Finally, we add some finishing touches to make the page look its best.

You are going to match the output below (between, but not including, the thick black lines).


expected output


Exercise 5: Upload Your Page to the Web (roughly 5 minutes)

Follow your instructor's directions to upload your page to your student web server. Verify that you did this successfully by viewing your page in the web browser.

Exercise 6 (advanced): Add 2nd Column: Friends List

If you manage to complete the first four exercises before lab time is up, work on adding a second column to the layout. You should copy and paste the following code into your journal.html:

<h1>Friends</h1>
<ul>
	<li><a href="http://www.cs.washington.edu/education/courses/cse190m/CurrentQtr/staff.shtml">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>

Use the appropriate layout-related tags/attributes and CSS to make this list into a second, left-aligned column as shown below. The colors, borders, etc. of the list are not important; the focus is on the layout. The layout with a second column must still be a liquid layout -- that is, all parts of it should adjust in size accordingly when the browser size changes. HINT: When multiple elements float in the same direction, they arrange themselves into columns. Also see textbook Chapter 4's section on "The clear Property" for more information.

You are going to match the output below (between, but not including, the thick black lines).


expected output


Exercise 7 (for 1337 h4x0rz only): Make Your Journal Annoying w/ Hover -- Elegantly

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! (Note: This is tricky.)

Valid XHTML 1.1 Valid CSS!