Chapter 3
Listing 3-10. An example of an embedded style sheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Power Outfitters Superhero Costume and Supply Co.</title>
<style>
h1 { color: blue; }
p { color: gray; }
</style>
</head>
<body>
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at
rock-bottom prices for the discerning costumed crime-fighter.</p>
</body>
</html>
Embedding a style sheet in the header of your document does further separate presentation from your
structured content, and those rules will be applied throughout that document, but it isn’t an efficient
approach if you’re styling more than one page at a time. Other documents within the same website would
require embedded style sheets of their own, so making any future modifications to your site’s design would
entail updating every single document in the site. That is unless your documents are assembled on the
server-side, where you might be able to maintain a single file that gets included in the header of every
page. In those cases, there can be some small performance advantages to using embedded styles over
external style sheets (it’s one less file to fetch from the server), but those advantages aren’t always
significant and might be negated by the additional code to download for each page.
A style element can validly appear in the body of a document if it carries a scoped
attribute, but that has yet to be implemented in any browsers at the time of this writing.
Once browsers support scoped, such an embedded style sheet would apply only to the
scoped element and not the entire document. See the section on the style element
earlier in this chapter for more about scoped embedded styles.
External Style Sheets
The third and best option is to place all your CSS rules in a separate, external style sheet, directly
connected to your document by way of a link element. An external style sheet is a plain-text file that you
can edit using the same text editing software you use to create your HTML documents, saved with the file
extension .css. This approach completely separates presentation from content and structure—they’re not
even stored in the same file. A single external style sheet can be linked from and associated with any
number of HTML documents, allowing your entire website’s design to be controlled from one central file.
Changes to that file will propagate globally to every page that connects to it. It’s by far the most flexible
and maintainable way to design your sites, exercising the true power of CSS.
