HTML and CSS Reference
In-Depth Information
As you build your own websites, you may end up working on both the HTML and CSS simultaneously,
styling each new element as you create it, building up the structure and style together. But it's good
practice to separate content from presentation in your mind as well as in your code. When you think about
HTML, think first about what the content means and how it works, not about how it looks. You may
inevitably need to commit a few presentational markup transgressions—adding an extra
span
here and
there, or giving an element a class just for easier selection in your style sheet—but try to keep
presentational markup to a minimum.
In this section we'll describe how we styled the Power Outfitters home page with CSS. You'll see the
design take shape bit by bit, from laying out the template to decorating the buttons. We won't cover every
last detail of the design in this chapter, but we encourage you to download the example code from
foundationhtml.com
and tear it apart to your heart's content. Studying how other websites are built is
one of the best ways to learn. The tips and techniques we'll demonstrate here are only a starting point.
Resetting Browser Defaults
Every web browser has its own built-in style sheet that establishes the default rendering for most
elements. Those default styles are intended to make even an otherwise unstyled document at least
readable if rather stark. Although most browsers' default style sheets are pretty similar and they'll display
unstyled pages in much the same way—white background, black text, blue underlined links, and so on—
there are often subtle differences between different browsers.
To compensate for these differences and to establish a more predictable baseline for our styling to come,
we're starting off our style sheet with a
CSS reset
. It's a collection of rules that override browser defaults
for most elements, giving us a consistent, cross-browser set of basic styles to add to. A reset strips a site
down to the bare minimum and lets you restyle those elements to suit your needs, but without repeatedly
overriding the browser defaults in every rule that changes them.
You can find a number of ready-made CSS resets online, often bundled with some broader CSS
framework or library. Two of the most popular CSS resets come from the Yahoo! User Interface library
(
yuilibrary.com/yui/docs/cssreset/
) and from the incomparable Eric Meyer
(
meyerweb.com/eric/tools/css/reset/
, yes, Meyer again; he really knows his stuff). These resets
tend to be quite thorough and override almost every single browser default, which can be something of a
double-edged sword; you gain precision and control over how your pages render, but you'll have to re-
declare your own values for every single browser default that was reset.
For our purposes we're happy to leave many of the default styles intact. Instead of opting for a plug-and-
play reset we've defined our own, more minimal version. We're only resetting the basics, especially
margins and padding so we can have better control over spacing between elements, and we'll let the
browser keep its defaults for typography, list styles, and so on. We'll override those defaults if and when
we need to later in our style sheet.
Listing 10-10 shows our simplified reset rules, which are the very first rules in our style sheet so later rules
can easily modify these values. This reset includes a rule setting most of the new HTML5 elements to
display as block-level because older browsers lack any default handling for those elements. Newer
browsers don't require this added instruction, but it doesn't do them any harm.
