WEB STANDARDS CREATIVITY

140
This makes 1em roughly 10px (16 divided by 100 multiplied
by 62.5 equals 10)—a unit of measurement that’s
easy to handle. Now we can equate pixel size to ems. For
example, type that is set to 14px could be expressed as
1.4em, 9px text could be expressed at 0.9em, and so on.
While I’m adding this to the body tag, I also add the
Global White Space Reset, which removes all the browser
default margins and padding.
{ margin: 0; padding: 0;}
The Global White Space Reset was first developed
by Andrew Krespanis at www.leftjustified.net
in October 2004 (http://leftjustified.net/
journal/2004/10/19/global-ws-reset/).
By using the CSS universal selector, *, I’m able to select all
elements within the HTML document and then remove all
the default padding and margins.
If you want something more rigorous for this, you could
use Yahoo’s global reset style sheet, which removes pretty
much every single default style in a browser. This gives
you a completely blank canvas to begin your work. See
http://developer.yahoo.com/yui/reset/ for more on
this style sheet.
What about colors and other
visual elements?
All of the colors and graphical elements for this project
are controlled by yet another separate style sheet. This is
because the grid, typography, and a lot of base styling for
elements (such as unordered lists, definition lists, and
images) needed to remain constant throughout the entire
site, which had two different color schemes. It was
straightforward to design in gray and simply overlay the
colors based on the site.
Adding a class to the container div controlled the various
layout options. This three-column layout has a class of
c1-c2-c3, but layout options were created for a wide
variety of layouts, such as c1, c1-c2, c1-c2-c3-c4-c5, and
so on. This naming convention told me two things: the
number of columns used in the six-column grid and also
the document order. For example, c1-c2-c3 could look
the same as c2-c1-c3, but the document order would be
different: the with the id of c2 would appear
before c1 and c3.
All in all, there were six different style sheets for the OCC:
A global style sheet
An IBO style sheet, controlling all top-level colors
A layout style sheet, user configurable
A typography style sheet, elements of which were
user configurable
A color style sheet, controlling the overall color
An alternative zoom layout, for accessibility purposes
This proved to be one of the most challenging aspects of
this design.