HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [99]
type = ”text/css”
href = ”myStyle.css” />
External Style
This page has styles set for paragraphs, body, and header 1.
The styles are defined in an external style sheet.
Where you normally see style tags (in the header), there is no style. Instead, you see a tag. This special tag is used to connect the current document with another document.
Defining the external style
When you use a page-level style, the style elements aren’t embedded in the page header but in an entirely separate document.
In this case, the page is connected to a special file called myStyle.css. This file contains all the CSS rules:
/* myStyle.css */
body {
background-color: #333300;
color: #FFFFFF;
}
h1 {
color: #FFFF33;
text-align: center;
font: italic 200% fantasy;
}
p {
background-color: #FFFF33;
color: #333300;
text-align: right;
border: 3px groove #FFFF33;
}
The style sheet looks just like a page-level style, except for a few key differences:
♦ The style sheet rules are contained in a separate file. The style is no longer part of the HTML page but is an entirely separate file stored on the server. CSS files usually end with the .css extension.
♦ There are no tags. These aren’t needed because the style is no longer embedded in HTML.
♦ The code begins with a comment. The /* */ pair indicates a comment in CSS. Truthfully, you can put comments in CSS in the page level just like I did in this external file. External CSS files frequently have comments in them.
♦ The style document has no HTML. CSS documents contain nothing but CSS. This comes closer to the goal of separating style (in the CSS document) and content (in the HTML document).
♦ The document isn’t tied to any particular page. The great advantage of external CSS is reuse. The CSS document isn’t part of any particular page, but any page can use it.
Reusing an external CSS style
External style sheets are really fun when you have more than one page that needs the same style. Most Web sites today use multiple pages, and they should share a common style sheet to keep consistency. Figure 5-3 shows a second page using the same myStyle.css style sheet.
Figure 5-3: Another page using exactly the same style.
The code shows how easily this is done:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”myStyle.css” />
Second Page
This page uses the same style as
External style sheets have some tremendous advantages:
♦ One style sheet can control many pages: Generally, you have a large number of different pages in a Web site that all share the same general style. You can define the style sheet in one document and have all the HTML files refer to the CSS file.
♦ Global changes are easier: Say you have a site with a dozen pages, and you decide you want some kind of chartreuse background (I don’t know why — go with me here). If each page has its own page-level style definition, you have to make the change 12 times. If you’re using external styles, you make the change in one place and it’s automatically propagated to all the pages in the system.
♦ Separation of content and design: With external CSS, all the design is housed in the CSS, and the data is in XHTML.
♦ Easy upgrades: Because the design parameters of the entire site are defined in one file,