HTML and CSS Reference
In-Depth Information
footer {
}
Right now, these are just bare declaration blocks with only selectors present, and no actual
CSSstyles.Thisframeworkwon'taffectthedocumentyet,butsimplyservestoillustrate how
we're going to use some of the selectors I've introduced in this chapter.
Here you can see we're making generous use of the class selector (e.g. .
promo
) and we've
also included use of the element type selector (e.g.
h1
and
h2
) as well as the descendant se-
lector (e.g. .
media img
) and the child combinator (e.g.
body > header
).
You'll also notice another convention we've used here: portions of the CSS have been inden-
ted to match the indenting that will exist in the HTML itself. You don't have to do this, but
it's a nice way to keep the CSS easy to scan when it starts building up.
If there's anything you don't understand in our CSS skeleton, don't worry too much about it
right now.We'll go into more detail in the coming chapters as we put some meat on those
bones, so to speak.
Note: What about the HTML?
This topic is not about HTML, so although there will be some code snippets
showing what HTML we're dealing with when writing the CSS, the HTML
will, for the most part, not be shown or discussed.
If you want to get the most out of the tutorial that runs through this topic, I
suggest that you download the code archive and use the HTML file provided
in the download. You can remove the completed CSS file that's included with
the archive and build your own CSS file step-by-step as you progress through
the topic.
All the code examples in this topic, if patched together correctly, will build
the complete CSS file (minus all the extra vendor prefixes for newer CSS fea-
tures—more on this in
Chapter 5
).
