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

Basic lab instructions

• You may want to bring your textbook to labs to look up syntax and examples.
• We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
• You probably won't finish all of the exercises. Do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.

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

• Resources: Firebug (make sure it's installed!), lecture slides

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.

• journal.html

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 borders are all 5px thick and solid.
• The colors are the intuitive HTML color names, e.g. the red border is the HTML color red.
• Hint: To reduce the needed id and class attributes, consider using CSS context selectors.

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:

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.

• The box with the green border should have a background color of white.
  
• The boxes with the blue borders should have a background color of #E8FBFB.
  • It should have a padding of 5px (on all sides) and margin of 10px only on the top of the box.
• The overall page content area should become centered on the page, should have left and right margins of 10%, and the following background image:
  • (inspect the image in Firebug to find out its URL!)

Exercise , example

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

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.

• The heading text in the red box should appear on the right side of that section of the page.
• The text of each journal entry should be widened so that each line fills the entire width of the section ("fully justified").
• The journal entry images should hover on the right side next to the surrounding text. The image should stay within the bounds of the blue box; that is, it should not bleed into the other content below it.
  • (Hint: If your boxes are not tall enough to fit the floating elements inside them, see the "Making Floating Elements Fit" in Chapter 4 of the textbook.)

Exercise , example

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

Exercise : Finishing Touches (~10 min)

(See example screenshot on next slide.)

• Change the box with the green border to have a solid, white, 10px-thick border.
• Change the boxes with the blue border to have a solid, 4px-thick border, in color #C2E9E9.
• Change the box with the purple border to have only a bottom border that is dashed and 2px thick in color #009097.
• Change the box with the red border to have a background color of #A8F0F0, and get rid of its border.
• Change the font size of the So fresh and so clean area to 14pt, and get rid of its border.

Exercise , example

This example is Victoria's beautified page:

Exercise : Put Page on Web (~10 min)

• Use our Uploading Files directions to upload your page to our Webster server.
  • Put your files in a folder named lab2 within your public_html area.
• Check the page by viewing it in the web browser. Its URL should be:
  • http://webster.cs.washington.edu/YOUR-UWNETID/lab2/journal.html

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>

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

Exercise , example

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

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.

• Using a search engine, figure out how to do rounded corners on your journal borders. Try to find a way that will work in both Firefox and Chrome/Safari.
• Make a new file layout-css3.css and link it to your page. In this file, add the necessary CSS rules to round the corners on your journal's borders. (Using a separate file keeps all the "invalid" CSS separate from the "valid".)
• If you finish that, consider exploring some other properties from CSS 3, such as text shadows.

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!