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

Handout

Basic CSS Handout.

Resources

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

Assignment

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

Due in class, Nov 9.

A good CSS tutorial for beginners

Lots of CSS examples.

Centering

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.

Bootstrap

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.

Fonts

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.