Nov 2: CSS

3-page web site Due today:, with images (1 per page, at least) of your work from this class. Bring it in on your flash drive.

CSS Reference

CSS Reference and Tutorials


Basic CSS Handout.


Use the CSS Validator to test your CSS. Use the "By File Upload" method.

CSS Selectors

selector selector name matches
* universal everything
h1 type all h1 tags
li a descendant every a tag within an li element
.warning class every element with class="warning"
div.warning class every div with class="warning"
#temporary id every element with class="warning"
div#temporary id every div with id="warning"
a#active pseudo-class every a tag in the "active" state - that is, the mouse is hovering over it.

Absolute Positioning Example


Add CSS to your HTML assignment, with particular attention to colour, type and positioning.

Due in class, Nov 9.

Written Assignment

Write a usability review of a web site.

The web site should be one that offers more than just content. E-commerce sites, social networking sites, etc are ideal. Fill in your topic in this form before starting; I must approve each topic. Sign up for a topic here.

  • Make sure to review the main functions of the site from the perspective of a user.
  • Think about what happens when things go wrong.
  • What's good?
  • What can be improved?
  • Find someone to act as a test subject and observe them. Give them a specific task.
  • Minimum length: 500 words.

Assignment resources

You must submit a topic by Nov 9. Further dates will be posted later.

A good CSS tutorial for beginners

Lots of CSS examples.


Centering in CSS is, well, odd. You can center text easily enough, but how do you center a div? Here's how:

#divname {
width: 800px;
margin-left: auto;
margin-right: auto;

In the example above, the div is given a width of 800px. If you want to center the whole page, wrap all your content in a div and center that.


The Bootstrap framework is a set of CSS components to speed the building of responsive web sites.

CSS Resets

CSS Resets. Getting rid of the built-in styles your browser applies.


Typekit. A service for managing CSS fonts. A free option is available.

Google Fonts. A free service for embedding fonts - but the range of options and quality is not as good as commercial services.

CSS Frameworks

The Pure CSS Framework. Pre-built components for web projects.