| There are several ways to associate styles with Web documents. We'll quickly mention the three methods that are most commonly used, and then the rest of the chapter will focus on the first of these methods. 1. External style sheets. 2. Embedded style sheets. 3. Inline style attributes.
External Style Sheets An external style sheet is a separate text file that can be associated with one or more HTML documents. A single style sheet can be associated with thousands of HTML documents. This makes the external style sheet an extremely powerful tool, and it's the method we'll focus on in the rest of this chapter. For example, here is the style sheet we associated with the AIR judging form we created in Chapter 10. This style sheet will be discussed throughout this chapter. body{ font-family:arial,verdana,sans-serif; font-size:1em; font-weight:normal; font-style:normal; line-height:1.25em; color:black; background-color:white } fieldset{ padding-top:1em; padding-left:1em; padding-right:1em; border:groove } legend{ font-family:arial,verdana,sans-serif; font-size:1.4em; font-weight:bold; font-style:italic; color:yellow; background-color:black; border:outset} .item{ font-family:arial,verdana,sans-serif; font-size:1.2em; font-weight:bold; font-style:normal; color:black; background-color:silver} .menu{ font-family:arial,verdana,sans-serif; font-size:1em; font-weight:normal; font-style:normal; color:black; background-color:white; text-indent:-5%; margin-left:5%; margin-top:0 em; margin-bottom:0 em } To associate an external style sheet with an HTML document, include a <link> element like the one below in the <head> element of your HTML document. <html> <head> <title>My Stylish Page</title> <link rel="stylesheet" href="mystyle.css" type="text/css"> </head> . . . </html> Embedded Style Sheets In some cases, it's appropriate to embed a style sheet within a specific document for example, when the document has specific presentation and layout that are different from other pages on the same site. If a document includes both a <link> element that points to an external style sheet and an embedded style sheet, the embedded style sheet "wins": that is, if both style sheets apply formatting to the same elements (such as a table), the browser will render the table according to the embedded style sheet. As we pointed out earlier, this is what the term Cascading Style Sheets means. For example, we could create an embedded style sheet to override the style for the <legend> element as we defined it above. The embedded style sheet might look like this. <style type="text/css"> <!-- legend{ font-family:arial,verdana,sans-serif; font-size:1.25 em; font-style:italic; font-weight:bold; color:white; background-color:maroon; border:outset } --> </style> Note that the embedded style sheet is actually a <style> element with all style definitions enclosed between the <style> and </style> tags. (The <style> element must be contained within the document's <head> element.) Note, also, that the contents of the <style> element are shown as an HTML comment, marked by <!-- at the beginning of the comment and --> at the end. This forces older browsers that do not support embedded style sheets to ignore the style declarations instead of trying to render them and failing. Inline Style Attributes This third method may be used in conjunction with the techniques described above; it's appropriate when you want to format a single element or <span> within a larger element. In the same way that the embedded style sheet overrides the external one, an inline style attribute overrides style declarations in external and embedded style sheets. Inline style differs from external and embedded styles in several important respects. First of all, an inline style is an attribute rather than an element or a separate document, as shown in the code below. <p style="font-family:takoma; font-style:italic; font weight:bold"> The text of this paragraph is formatted in Takoma bold italic.</p> In order for this inline style to take effect, the document's <head> element has to include a style declaration, such as the <meta> tag in the example below. <html> <head> <title>Style Sheets</title> <meta http-equiv="content-style-type" content="text/css"> . . . </head> . . . </html> The inline style attribute should be used sparingly for example, when a single element in a document needs to be formatted in a special way. As John Pozadzides and Liam Quinn [1999] of the Web Design Group point out, if you rely too much on inline styles you forfeit many of the benefits of using style sheets in the first place. For example, the source code for your main document gets cluttered up with presentation instructions, becoming harder to maintain and upgrade the more style attributes occur within the document. And instead of being able to change the appearance of dozens or thousands of pages by modifying a single external style sheet, you now have to locate every instance of the style attribute in every document where you want the change to take effect. This can be even more burdensome if you are serving up dynamic Web pages and the content is stored in a database or otherwise not easily modifiable. | 
