Chapter 4In this section, you’ll learn how to override some of these default browser styles with style rules of your
own. This is only a starting point, and we can’t hope to teach you everything there is to know about CSS in
a single book—especially when we’re also trying to teach you everything about HTML5 at the same time.
But one must walk before one can run.Establishing New Elements
Every graphical web browser has a built in style sheet that defines the basic default styles for most
elements in HTML. That’s assuming, of course, the browser recognizes the elements and includes rules
for it in its style sheet. The HTML5 standard is still taking shape, and introduces many new elements and
attributes that didn’t exist in any previous version. Many of the latest versions of web browsers are already
integrating support for these new elements, but older versions—and mind you, that “older version” might
be only a few weeks old—don’t yet recognize the new elements and don’t apply any default styling at all.
To make sure those older browsers can properly display your HTML5 pages, you should include a few
basic rules at the beginning of your style sheet, just to do what a newer browser’s default style sheet will
do automatically. The following simple style rule, added at the beginning of your style sheet, will establish
many of the new HTML5 elements as block-level elements, priming them for laying out your pages with
later style rules:
section, article, aside, header, footer,
nav, hgroup, figure, figcaption {
display: block;
}
As you can probably deduce, this simple rule declares that all these elements—section, article, aside,
header, footer, nav, hgroup, figure and figcaption—should be rendered on a new line and expand
to fill the available width.The IE Problem
A rendering engine is the part of a graphical web browser’s program that interprets CSS, applying style
rules to elements in the HTML document and converting that code into an on-screen image. The rendering
engine reads a selector in a style rule to locate the HTML elements to which that rule applies. When the
browser finds a matching element in the document, it will try as hard as it can to style that element
according to your instructions. If it doesn’t find a matching element, the browser ignores that style rule and
moves on to the next one.
Most browsers and their built-in rendering engines are generally element-agnostic, and will happily apply
CSS to any element that matches a given selector, regardless of what else it may or may not know about
that element. You could, in theory, make up any elements you like—<animal>cat</animal>,
<spoiler>Rosebud is the sled</spoiler>, or <soundeffect>ZZZAP!</soundeffect>—and style
them with CSS and most browsers will happily oblige you. Go on, try it. The elements won’t be valid and
won’t have any standardized function or semantic value, and you should never commit such shenanigans
in reality (unless you’re using an extensible markup language that allows that sort of thing). But when it
comes to a strictly visual rendering, the browser simply doesn’t care.