University of Washington, CSE 190 M, Spring 2008
Lab 2: CSS Design and Layout (Thursday, April 10, 2008)

The purpose of this lab is to practice writing Cascading Style Sheets to control the appearance and layout of a web page. You probably won't have enough time to finish all of the exercises; finish as much as you can within the allotted time.

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 TA 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.

Exercise 1: Arrange Your Page into Sections (roughly 15 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 the directions at our Uploading Files page to upload your page onto our Webster server. Verify that you did this successfully by viewing your page in the web browser. (Ask a TA if you have any problems logging in to Webster or uploading your files!)

Exercise 6 (for CSE Majors): 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 Chapter 2'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 fairly tricky! Exercise 7 is only meant for those who are already proficient in CSS, and it is in no way something that majors or non-majors will be expected to do in this course.

Valid XHTML 1.1 Valid CSS!