Understanding How Styles Cascade | Microsoft Expression Web For Dummies

The C in CSS stands for cascading because of the multiple levels of styles that cascade, or fall onto each other, on the road to styling something (like text) on a Web page.

Consider the following:

In Joe Web Surfer's Web browser, the default font for all text is set to Times New Roman. The software company that makes the browser set the font for that browser. It's called a browser style sheet because styles are set by the browser (or browser manufacturer).
Joe Web Surfer hates Times New Roman, so he changes the default font in his browser to Helvetica. By changing his font, Joe Web Surfer has set a user style sheet that overrides the font set by the browser style sheet.
You, the Web page designer, decide that you want the default font for your Web site to be Georgia. You write this style rule in a style sheet and attach it to all pages in your Web site, which changes all your text to Georgia. Your style sheet is an author style sheet because you're the author of your Web site and thereby the author of the style sheet attached to the Web site.

If Joe Web Surfer has the Georgia font installed on his computer, your page's text uses Georgia in his Web browser because the author style sheet (which uses Georgia) has higher authority than Joe's user style sheet (Helvetica), which in turn overrides his browser style sheet (Times New Roman). If Joe Web Surfer also hates Georgia, the only way he can override your author style sheet is to uninstall Georgia from his computer.

REMEMBER

If, instead, you did not specify the font for your page's text, your page would be displayed in Helvetica in Joe Web Surfer's browser because his user style sheet overrides the font set by the browser style sheet. Which font would be displayed in Joe Web Surfer's roommate's browser (who never bothers to change defaults)? Text would be displayed in Times New Roman, the font specified by the browser style sheet.

You, as the Web page designer, also have control over your own cascading styles when you build your Web pages. Here's how they work:

You set the font for your Web site to Georgia by writing a style rule and saving it in an external style sheet attached to all the Web pages in your site. (We introduce external style sheets later in this chapter and describe them in detail in Chapter 9).
You then decide that on one particular page, you want the font for all first-level headings to be Matisse. You write a style rule for first-level headings and, rather than move the style rule to the external style sheet-where it would affect every first-level heading throughout your entire site-you leave the style rule on this single page, in the page's <head> section (known as an internal, or embedded, style).
You then decide that on that same page you want one particular first-level heading to be Verdana. So you insert a style rule inside its <h1> HTML tag (called an inline style).

What font does that one particular first-level heading on that one particular page end up using when Joe Web Surfer looks at it in his browser? As long as he has Verdana on his computer, the heading uses Verdana because the inline style takes precedence over all other styles. (If Joe Web Surfer's computer doesn't have Verdana, the internal, or embedded, style rule written in the <head> section of the Web page takes precedence, and the heading appears in Matisse. If Joe doesn't have Matisse, the heading appears in Georgia, the font specified by the style sheet attached to the Web page.)

We show you what these style rules-external, internal or embedded, and inline-look like in Expression Web later in this chapter.