HTML and CSS Reference
In-Depth Information
Before we look in detail at when to use these new elements, and
what they mean, let's first style the basic structures of the page.
In all but one browser, styling these new elements is pretty sim-
ple: you can apply CSS to any arbitrary element, because, as the
spec says, CSS “is a style sheet language that allows authors
and users to attach style … to structured documents (e.g., HTML
documents and XML applications)” and XML applications can
have any elements they want.
Although you can use the new HTML5 elements now, most
browsers—even current ones—don't necessarily understand
them. They don't do anything special with them and treat them
like unknown elements you make up.
Therefore, using CSS we can fl oat
<nav>
, put borders on
<header>
and
<footer>
, and give margins and padding to
<article>
almost as easily we can with
<div>
s.
What might surprise readers is that, by default, CSS assumes
that elements are
display:inline
, so if you just set heights
and widths to the structural elements as we do
<div>
s, it won't
work properly in the current crop of browsers until we explicitly
tell the browser that they are
display:block
. In current brows-
ers, there is a rudimentary style sheet built into the browser
that overrides the default inline styling for those elements we
think of as natively block-level (one such style sheet can be
found at
http://www.w3.org/TR/CSS2/sample.html
).
However,
those browsers don't yet have rules to defi ne
<header>
,
<nav>
,
<footer>
,
<article>
as
display:block
, so we need to specify this
in our CSS. When browsers do include such rules, our line will
be harmless but redundant, acting as a useful helper for older
browsers, which we all know can linger on well beyond their
sell-by dates.
So, to style our HTML5 to match our HTML 4 design, we simply
need the styles
header, nav, footer, article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:79%;}
footer {clear:both;}
And a beautiful HTML5 page is born. Except in one browser.
