This is one in a series of Presentations given by Bud Kraus, Web Design Instructor and Consultant. Contact Bud at bud@joyofcode.com or 973 25 1452 if you'd like him to present any of these talks to your business or organization.
Summary
A fundamental difference between the web page medium and that of print design is that web browsers allow three groups of style (3 style sheets) to blend together to result in how any web page appears to a user. In the print medium, obviously it's WYSIWYG. In web design there's a pecking order as to which style sheet takes precedence over each other. Working with Cascading Style Sheets means understanding what the cascade is - the method by which CSS style rules are sorted and prioritized. Once you get that figured out, you're on your way to effectively styling web pages.
Contents
CSS Is Everywhere
"Oh yeah?" the cynic in you asks. "Where is CSS? I don't see any CSS. Where do you go lookin' for CSS? What is CSS anyway?"
CSS (Cascading Style Sheets) is an Internet technology being developed by the World Wide Web Consortium (W3C). It is a web page design standard whose purpose is to provide the styling requirements for electronic (and other forms of) publishing. It works along side ("attaches to") XHTML (Extensible Hyper Text Markup Language) which is responsible for formatting the content of a web page.
The truth is, CSS is Everywhere, and by everywhere I'm talking about 3 distinct places.
But first, before you can understand what the cascade is, you have to understand what a style sheet is. Then we'll get to how style sheets work together to form the mosaic responsible for web page styling.
What Is A Style Sheet?
A style sheet is a unified group of principles, or rules, that ultimately determine how a web page looks.
These rules collectively deal with font, foreground and background color, and text properties, along with the box model properties of padding, border, and margin.
As you're about to see, WHERE these style rules are located, and how they work together in the cascade, make all the difference in the world of web page design.
How Do Style Sheets Cascade?
First things first - what is a cascade? A cascade is a succession of stages, processes, operations or units.
The CSS cascade is made up of a succession of style sheets each influencing how a web page looks. The succession deals with the sorting and prioritizing of the rules that define the style of a page.
CSS is about the conflicts between style rules, and how they are settled. Always keep that in mind and you'll be well on your way towards effectively using its awesome power.
Which is why you are here!!
If you think about how you can cascade layers, as in the graphic on the right, you'll get a visual picture of how CSS works. User agents (web browsers , if you prefer) support three style sheet types. The three types of style sheets are Browser Style Sheet, User Style Sheet and Designer Style Sheet.
(To make things a tad more interesting, the Cascade model is also used to prioritize the style rules that you, as designer, create in the Designer Style Sheet. In the Designer Style Sheet, there are 3 different locations for style rules, each having a different priority. I'll explain more later when we get to the section on Designer Style Sheets.)
Are you still there? That was the hard part. All this will make more sense as you start to learn and work with CSS.
Here's the key: All 3 style sheets work together to influence, in one degree or another, how every web page looks.
The 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 web page. 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.
The 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. Like I said, 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)
The 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 a black background.)
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.
Wrap 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.