The Document - HTML5 with CSS3 - page 60

space should be between elements on the page. These default styles aren't much to look at—really just
the bare minimum to make a page readable, but not especially attractive or memorable. If you want to
improve on the default presentation you'll need to add some style rules of your own.
CSS is a very different language from HTML, but is entirely dependent on HTML to work. The HTML layer
comes first and foremost, delivering content to the browser and surrounding it with a meaningful structure.
CSS adds a separate layer of presentation on top of that HTML structure, further describing what those
elements should look like. With CSS, the presentation layer is separated from the content layer, but the
two are intimately related. The HTML layer must exist so that CSS can enhance it; CSS can't survive on its
own. There are a few methods you can use to apply this layer of CSS styling to your HTML content, each
with its own benefits and some drawbacks.
Inline Styling
You can include CSS declarations within the optional style attribute of each element in your markup, like
you see in Listing 3-9. Chapter 2 showed you the anatomy of a CSS rule—with a selector and a
declaration consisting of properties and values—but inline styles aren't constructed as rules. There's no
selector because the properties and values are attached directly to the element at hand. In terms of
specificity (also introduced in Chapter 2), an inline style is the most specific of all because it applies to
exactly one element and no others.
Listing 3-9. An example of inline styling
<h1 style="color: blue;" >Welcome, Heroes!</h1>
<p style="color: gray;" >Power Outfitters offers top of the line merchandise
at rock-bottom prices for the discerning costumed crime-fighter.</p>
However, you should avoid using inline styles. They mix presentation with your structural markup, negating
one of the main advantages of using CSS in the first place. Inline styling is also exceedingly redundant,
forcing you to declare the same style properties again and again to maintain consistent presentation
throughout a website. Should you ever want to update the site in the future—changing all your headings
from blue to red, for example—you would need to track down every single heading on every single page to
implement that change, a daunting task on a large and complex website.
Still, an inline style might be an efficient approach on some rare occasions, but those occasions are very
few and far between indeed. Inline styling is most useful for temporary, from-the-hip testing and
prototyping while you're working on a page, not as a permanent method of styling content. For anything
meant to last, inline styles should be a last resort only when no other options are available.
Embedded Style Sheets
You can embed style rules within the head element of your document and those rules will be honored
throughout the document in which they reside. An embedded style sheet (sometimes called an internal
style sheet) is contained within a style element, shown in Listing 3-10 and covered in greater detail
earlier in this chapter.