Alternate Stylesheets

Check out how this page can look with a different style sheet applied.

CSS Sprites

A Sprite image is a single graphic image that you can get many uses from by cutting out portions of the sprite. Like cutting cookies from a big sheet of dough, this technique can make your site load faster with fewer http requests and still add color & character to the content of your web pages.

 

 

 

 

Designs via CSS

sprite image The navigation bar is powered by a single sprite image which loads in one http request and takes care of twenty-one possible instances. This also helps the site load faster.

Colors & Styles

The default colors are basic shades of blues and grays on white. This makes the site very readable and helps magnify the change when you apply a CSS/Javascript wrinkle called 'alternate stylesheets'.

Background Images

The Header is a 3-D graphic made with Gimp 2.6, which changes color from Default to Style-1 and changes dramatically in design and size in the Style-2 option. Style-2 uses an 7 x 500 pixel graphic to tile the body and allows the header to seem detached from the rest of the document. The main content and side bar have different proportions also.

Sidebar, background, and header fonts are color appropriate for each style option.

Font Selections

The H2 headers are a Georgia font group at 1.5 em size with a small caps variation. The H3 headers are a Lucida font also sized at 1.5 em. The default font for the remaining content is a Verdana group font in gray and darker for the side bar.