ptg 527 chapter 14 Introduction to CSS (Cascading Style Sheets) with JavaScript 14.1 What Is CSS? Cascading Style Sheets (CSS) was a standard introduced by the World Wide Web Con- sortium (W3C) in 1995 to help designers get more control over their Web pages by enhancing what HTML can do—it is used to stylize the content of a Web page. Whereas HTML is concerned with the structure and organization of a document, CSS is con- cerned with its layout and presentation, or formatting the document. In the old days, HTML tags were used to set up the structure and style of a page. If you wanted to create an H1 tag with an Arial blue font, point size 22, you would have to set the same attri- butes for each H1 tag in the entire document, To apply these changes to an entire Web site could be a daunting task. With CSS you can set the style once for all H1 tags and put that style definition in its own .css file. When the page is loaded the CSS style will be applied to all H1 tags in the page in one sweeping change. Because the initial style of the content of a page is done with CSS, we’ll start there. The goal is to use CSS with the DOM and JavaScript (Chapter 15) together to dynami- cally change the style of the page, often called Dynamic HTML (DHTML). For a com- plete discussion of CSS (both CSS1 and CSS2), see http://www.w3org/Style/CSS. If you are a designer and already have a good CSS foundation, you can skip this chapter and go directly to Chapter 15, “The W3C DOM and JavaScript.” 14.2 What Is a Style Sheet? Webster’s Dictionary defines “style” as a manner of doing something very grandly; ele- gant, fashionable. Style sheets make HTML pages elegant by allowing the designer to create definitions to describe the layout and appearance of the page. This is done by cre- ating a set of rules that define how an HTML element will look in the document. For example, if you want all H1 elements to produce text with a green color, set in an Arial 14-point font centered on the page, normally you would have to assign these attributes From the Library of WoweBook.Com ptg 528 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript to each H1 element as it occurs within the document, which could prove quite time con- suming. With style sheets you can create the style once and have that definition apply to all H1 elements in the document. If you don’t have a lot of time to learn how to create style sheets, an excellent alternative is Macromedia’s Dreamweaver MX. For more on authoring tools, see http://www.w3.org/Style/CSS/#editors. Style sheets are called cascading because the effects of a style can be inherited or cas- caded down to other tags. This gets back to the parent/child relationship we have talked about since Chapter 1, the DOM. If a style has been defined for a parent tag, any tags defined within that style may inherit that style. Suppose a style has been defined for a <p> tag. The text within these tags has been set to blue and the font is set to a sans serif font. If within the <p> tag, another set of tags is embedded, such as <b> or <em>, then those tags will inherit the blue color and the “sans serif” font. The style has cascaded down from the parent to the child. But this is a simplistic definition of cascading. The rules can be very complex and involve multiple style sheets coming from external sources as well as internal sources. And even though a browser might support style sheets, it might render the CSS information differently. For example, the DOCTYPE dec- laration used at the start of the document might allow a document to be displayed with nonstandard rendering rules (Quirks mode) or follow the W3C strict standard, and older browsers may have a limited or a buggy implementation of the CSS standard. For more on this topic, see https://developer.mozilla.org/en/Common_CSS_Questions. The good news is that all modern browsers support CSS. 14.2.1 What Is a CSS-Enhanced Browser? A CSS-enhanced browser supports CSS and will recognize the style tag <style> as a con- tainer for a style sheet, and based on the definition of the style, will produce the docu- ment accordingly. Modern browsers, such as Internet Explorer, Mozilla Firefox, Netscape, Opera, and Safari support CSS, and the majority of Web users are running a CSS-enhanced browser. However, just because a browser is CSS enhanced doesn’t mean that it is flawless or without limitations. And just because a browser is not CSS enhanced, doesn’t mean that it can’t see the content of a page. 1 Traditionally, browsers have silently ignored unknown tags, so if a browser does not support CSS, when it encounters a <style> tag, its content will be treated simply as part of the document. To hide the <style> tag content, one method is to enclose it within HTML comments as shown here: <style type="text/css"><! p.largetext/* */ { font-size: 200% ; } ></style> Example from: http://www.thesitewizard.com/css/excludecss.shtml 1. For an updated overview of available browsers, see the W3C overview page: http://www.w3.org/Style/CSS/#browsers. From the Library of WoweBook.Com ptg 14.2 What Is a Style Sheet? 529 (See the section “CSS Program Structure” on page 530 for more on this.) If you are contending with an older version of your browser, it might just be a good time to upgrade to a newer model! 14.2.2 How Does a Style Sheet Work? A style sheet consists of the style rules that tell your browser how to present a docu- ment. The rules consist of two parts: a selector—the HTML element you are trying to stylize—and the declaration block—the properties and values that describe the style for the selector. This rule sets the color of the H2 element to blue: H2 { color: blue } A rule, then, consists of two main parts: the selector (e.g., H2) and the declaration block (e.g., color: blue). Example 14.1 demonstrates this simple rule. FORMAT selector { property: value } declaration block EXAMPLE H1 { color: blue } EXAMPLE 14.1 <html> <head><title>First Style Sheet</title> 1 <style type="text/css"> 2 h1 { color: saddlebrown } /* rule */ h2 { color: darkblue } </style> </head> <body bgcolor=silver> 3 <h1>Welcome to my Stylin' Page</h1> 4 <h2>What do you think?</h2> </body> </html> From the Library of WoweBook.Com ptg 530 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.3 CSS Program Structure 14.3.1 Comments CSS comments, like C language comments, are enclosed in /* */. They are the textual comments that are ignored by the CSS parser when your style is being interpreted, and are used to clarify what you are trying to do. They cannot be nested. H1 { color: blue } /* heading level 1 is blue */ EXPLANATION 1 The style sheet starts with the HTML <style> tag and specifies that the style sheet consists of text and CSS. The purpose of this style sheet is to customize HTML tags, thus giving them a new style. 2 A selector is one of any HTML elements, such as h1, h2, body, li, p, or ul. In this example, the h1 and h2 elements are selectors. The declaration has two parts: property (color) and value (saddlebrown). Every time an <h1> tag is used in the document, it will be saddle brown, and every time an <h2> tag is used, it will be blue. (There are approximately 50 properties beyond the color property that are defined in the CSS specification!) 3 The <h1> tag will be displayed in saddle brown, based on the rule in the style sheet. 4 The <h2> tag will be displayed in blue, based on the rule in the style sheet. Output is shown in Figure 14.1. Figure 14.1 Style sheet output in Firefox. From the Library of WoweBook.Com ptg 14.3 CSS Program Structure 531 14.3.2 Grouping Grouping is used to reduce the size of style sheets. For example, you can group selectors in comma-separated lists, if you want the same rule to apply to all of the elements: H1, H2, H3 { font-family: arial; color: blue } Now all three heading levels will contain blue text in an Arial font. You can also group a set of declarations to create the style for a selector(s). The fol- lowing rule combines a number of declarations describing the font properties for an H1 element: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: verdana; } And you can group the values for a particular property as follows: h2 {font: bold 24pt arial} EXAMPLE 14.2 <html> <head><title>Grouping Properties</title> <style type="text/css"> 1 h1,h2,h3 { color: blue } /* grouping selectors */ 2 h1 { /* grouping declarations */ font-weight: bold; font-size: 30pt; font-family: verdana; } 3 h2 { /* grouping a property's values */ font: bold 24pt arial } </style> </head> <body bgcolor=silver> 4 <h1>Welcome to my Stylin' Page</h1> 5 <h2>What do you think?</h2> 6 <h3>Groovy!</h3> </body> </html> From the Library of WoweBook.Com ptg 532 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4 Common Style Sheet Properties In the previous examples, font-family and color are properties (also called attributes), and assigning values to them defines the style of the document. Listed in Table 14.1 are some of the properties commonly used in style sheets. Many of these properties are used in the style sheets defined throughout this chapter and later as properties of the style object used with JavaScript. The Web Design Group provides a complete listing of this information at http://www.htmlhelp.com/reference/css/properties.html. EXPLANATION 1 Three selectors, h1, h2, and h3, are grouped together. The declaration block en- closed in curly braces sets the color property to blue. Whenever any one of the h1, h2, or h3 elements is used in the document, its text will be blue. 2 The declaration block for the h1 selector consists of a group of properties and val- ues to further define the font style for this heading. 3 The font property, in this example, groups the font values as a list, rather than cre- ating individual property/value pairs as done on line 2. 4 Now the h1 tag is tested to see if the style was applied, and it is! 5 The style for the h2 tag is tested and it has been applied. 6 The only style set for the h3 tag is a blue font, and that’s all we get, as shown in Figure 14.2. Figure 14.2 Grouping selectors and declarations for h1, h2, and h3 HTML elements. From the Library of WoweBook.Com . ptg 527 chapter 14 Introduction to CSS (Cascading Style Sheets) with JavaScript 14.1 What Is CSS? Cascading Style Sheets (CSS) was a standard introduced by the World. content of a page is done with CSS, we’ll start there. The goal is to use CSS with the DOM and JavaScript (Chapter 15) together to dynami- cally change the style of the page, often called Dynamic. good CSS foundation, you can skip this chapter and go directly to Chapter 15, “The W3C DOM and JavaScript. ” 14.2 What Is a Style Sheet? Webster’s Dictionary defines “style” as a manner of doing