Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Where's The Cascade In Cascading Style Sheets? (Part 2 of 2)

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v2 i10
Originally Published: May18, 2006

Browser Style Sheet

A Browser Style Sheet is the default style sheet of a browser, something built into the software. Neither the user nor web designer can do anything to change it.

The browser style sheet does the basic work of styling or laying out every web page if there is no style set by the user and/or designer. In other words, if we were to turn off all user preferences (such as font and link colors) and remove designer styling information from a web page, the styling that we would see is that set by the Browser Style Sheet. Pretty plain, but nonetheless ever present.

For example, think for a moment about the space between lines of text - the line height - on a webpage. Who sets that? How does a browser know how much space to allow between lines of text?

The browser has a built in formula for line height which takes many factors into consideration. So, if the web designer didn't specify a line height, and the user can't set a line height, then that styling job falls to the low man on the totem pole - the Browser Style Sheet.

This same process occurs for all XHTML elements. If a style is not set by the user, through the variety of user preferences given in a browser, or by the web designer, then the default style sheet will kick in - the Browser Style Sheet. Thus, the browser makes all the styling and layout decisions until the user and the designer step onto the dance floor.

That's why I always say that web design is a pas de deux between users and designers. They, along with the Browser Style Sheet, are the parties which influence how all web pages look.

User Style Sheet

Every web browser allows users to change some styling preferences. Most browsers allow users to set:

  • font size
  • font type
  • font color
  • page background color
  • link colors

Different browsers allow users to make these choices in different ways. Some browsers allow users to do some things which other browsers do not.

In addition, users themselves can create their own style rules, much like web designers can. I won't tell you that it's a frequent practice, but from a conceptual standpoint, it is important. A User Style Sheet recognizes and leverages the full potential of web interface usability and design. For example, a user can create a file which specifies that all web pages are to have a black background with yellow text. Granted, this is not a frequent practice, but it demonstrates that users can have paramount influence over how a page looks.

Taken together, the collection of these options are called the User Style Sheet. All preferences set by the user will override the styling information in the Browser (default style sheet)

Designer Style Sheet

The designer has the potential to exert the greatest influence on a web page's appearance. Notice I say "influence," for total control is not possible since the user has the ability to thwart the designer's intent. (as mentioned in the above example where the user creates a file which renders all pages with yellow text on black.)

A Designer Style Sheet is what we're going to learn to create, so standby. As you might have surmised, it is the mechanism by which we, as designers and web authors, apply our personal styles to web pages.

To sum it all up:

As you can see a web page's appearance is a collaborative blending process between 3 major forces - the browser style sheet, user style sheet, and designer style sheet. Your ability to understand the interplay between the three style sheets is critical towards understanding how to style web pages.

Page 1 of 2