CSCI 102T

The Socio-Techno Web

Home | Schedule | Labs | CS@Williams

Lab 4: Cascading Style Sheets

For this week's lab assignment, you will learn about using Cascading Style Sheets (also known as CSS) to "clean up" the HTML code in your webpage. In a nutshell, CSS separates the content of a webpage from the style, which also helps keep webpages from displaying in different formats in different browsers. CSS allows web developers to define all stylistic details (such as font size, background color, text alignment, margin size, etc) in a custom CSS file that can be shared by multiple web pages in a website.

Warmup Exercise

Before getting started with CSS, spend a few minutes fixing any existing formatting problems in your webpage. One way to test for errors on your own is to try the HTML validator on your webpage. Be warned that some errors and warnings will appear cryptic. Your instructor can help you with this. Don't get bogged down fixing too many issues related to formatting (i.e., things like font size, color, etc) since you are going to migrate all of these details into your CSS file this week anyway.

Background Info: Understanding CSS

As we have seen before with HTML, the Web is a great resource for learning more about CSS. Start by skimming Chapter 2 of the book Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos. Additional information about CSS can also be found here and here. Take some time to read over these carefully. There is also a short YouTube video that may be helpful after you've done these readings. (Please don't watch this in lab unless you have headphones.)

CSS Tutorial

To gain a better understanding of CSS, work through this CSS tutorial. Note that you can use TextWrangler as your text editor instead of TextEdit as the tutorial suggests. After completing the tutorial, update your webpage to use an external CSS file for all formatting. You should be able to use the CSS file created in the above tutorial as a template for your own custom CSS file.

Tasks for lab

  1. Test your webpage in the HTML validator and fix major errors.
  2. Read Chapter 2, this and this for basic CSS info. You can also watch if you feel like you need more background.
  3. Complete this CSS tutorial.
  4. Update your own website to use CSS for all formatting on all pages. Once you are finished, retest your HTML and CSS using the HTML and CSS validator.
  5. Since we don't have lab next week, this is due with your mid-semester projects on Tuesday, Oct 17.