In the markup shown above, we've moved the inline style into an embedded style sheet. The embedded style sheet starts with a <style type="text/css"> tag and, predictably, ends with a </style> tag. The actual style declarations are enclosed in a set of curly braces: { and }. The p that appears before the first curly brace tells the browser what the style rules are for; in this case, we're making the text inside every p element bold. The p is called the selector, and it's a great tool for quickly and easily changing the appearance of lots of elements on your page. The selector, curly braces, and declarations combine to make up what's called a rule.
In this case, our style sheet contains one rule: "Please style all the paragraphs on this page so that the text appears in a bold font."
If we wanted to, we could add more declarations to our rule. For instance, if we wanted to make the text bold and blue, we'd add the declaration color: blue to our rule:
<style type="text/css">
p {
font-weight: bold;
color: blue;
}
</style>
Jargon Break
Okay, okay. There's been an awful lot of jargon so far. Let's recap: Figure 3.3, 'The anatomy of a rule' brings the theory into focus.
Figure 3.3. The anatomy of a rule
Why Embedded Styles are Better than Inline Styles
In the example provided in Figure 3.3, text in all paragraphs will display in bold, blue type. This is useful because it saves you having to type <p style="font-weight: bold; color: blue"> every time you start a new paragraph -- a clear benefit over inline styles. If you wanted to change the color of all paragraph text to red, you need only to change it in the style sheet at the top of the page. That's efficiency for you!
<style type="text/css">
p {
font-weight: bold;
color: red;
}
</style>
For this reason, an embedded style sheet is a marked improvement over inline styles. But what if you have a web site that comprises many pages? If you want to make your changes across the whole site, using embedded style sheets in the way I demonstrated above is still not quite the perfect solution. Why not? Because, to make a site-wide change, you'd have to edit the embedded style sheet on every single page of that site. The best solution is to use an external style sheet.
External Style Sheets
Why External Style Sheets are Better than Embedded Styles
An external style sheet provides a location in which you can place styles that can be applied on all of your web pages. This is where the true power of CSS lies, and it's for this reason that we haven't spent too much time applying inline styles or embedded styles to our diving club project site.
The Bad Old Days
In the past, or The Bad Old Days, as we'll call them, people would create web sites on a page-by-page basis, and style them on a page-by-page basis using all manner of nasty elements of which I dare not even speak! Sometimes, these sites grew beyond the webmaster's wildest imagination. "Fantastic," thought Mr or Mrs Webmaster. "My web site now has over 200 pages! Soon I'll be bigger than Microsoft." A few months later, the webmaster decided to redesign the web site and realized, with considerable horror, that he or she would have to alter each and every single web page in order to redesign the site in a consistent manner. Every page needed 20 or more different tweaks, and each tweak had to be applied consistently to every page of the site. Inevitably, some pages were missed, and eventually the redesign plan got unceremoniously dropped. In short, the ugly web site remained ugly for a whole lot longer before dying a nasty death through sheer negligence (indeed, there are many such 'legacy' documents littered around the Web today). This need not be the case, though.
CSS gives you the power to set styling rules in one place. When you want to make changes to your web site, you make changes in that one place, and your whole web site changes automatically to reflect those new styles.
Happy Days! CSS Support is Here!
The good news is that the large majority of web browsers in use today offer excellent support for CSS (though this has not always been the case, which is why some people have been slow to adopt CSS-based design). Some browsers can choke on a few of the more advanced CSS techniques, but, by and large, you can style your web pages with CSS and be confident that what you see on your screen is the same view that 99.5% of your intended audience will see.
Share and Enjoy:
