Cascading Style Sheets

As the first topic of discussion related to CSS methods and Cascading Style Sheets, we will review the often perplexing art of positioning. CSS offers four positioning values, which I often confused until finding this excellent reference in transcending CSS, by Andy Clarke. This excellent CSS resource is referenced below.

Positioning Explained

Absolute

Absolute positioning positions an element according to its closest positioned containing block within the document tree. In the absence of a positioned containing block, an absolutely positioned element will take its position from the root element, <html>.

Fixed

An element positioned with a value of fixed is always positioned in respect to the viewport of the browser window and stays in position, even when the visitor scrolls the document. Fixed positioning is considered a type of absolute positioning.

Relative

Better described as offsetting, relative positioning moves an element from where it would usually appear in the normal flow. For example, an offset of top: 1.0em; will move an element up a distance of 1 em but will leave a ghosted space behind where the element would have been before offsetting.

Static

This is an element's default position in the normal flow of the document. The static value is useful really only for overriding an previous positioning rules.

transcending CSS

“The web has changed, and so has the art of creating web sites. Few visual designers are natural programmers, and as a result, visualizing how to work with markup, CSS and a range of programmatic techniques to create beautiful design is difficult ... So how do creative designers learn to be artistic yet functional? With transcending CSS: The Fine Art of Web Design.”
... Andy Clarke

This book is without a doubt the most enjoyable “visual style guide” I have had the pleasure to experience during my brief tenure as a Web designer and fully converted, CSS enthusiast. transcending CSS is not only well designed and appealing with its colorful imagery and effective screen shots, but the content offers an excellent education in advanced styling methods.

CSS Sites

*As fast as changes appear on the World Wide Web (and there are a number of excellent references on CSS), we have kept our references limited to the most recent.

A List Apart

Sitepoint CSS Reference

CSS Zen Garden

World Wide Web Consortium

W3C Cascading Style Sheets, Level 1

W3C Cascading Style Sheets, Level 2

W3C Cascading Style Sheets, Level 3 (current work)