Oct 26: HTML +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.

Assignment

Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully, and bring in on flash drive.

Due in class, Nov 2

Resources

An online tool for previewing text styles.

A bit advanced, but a useful framework for building CSS-based grids.

The W3C's CSS validator, similar to its HTML validator.

Bootstrap, the most popular CSS+HTML framework.

Template

Handout

Basic CSS Handout.

Resources

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.

Positioning Example

Due in class, Nov 2

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.