HTML and CSS Reference
In-Depth Information
Always Use Standards Mode
AbasicruleofthumbisthateveryHTMLdocumentyoucreateshoulduse“standardsmode.”
For a beginner, this might sound a bit too techy, but it's actually quite simple to ensure that
all your HTML pages comply.
To ensure your CSS is rendered properly by the browser (meaning, it's in standards mode,)
make sure the HTML document to which your styles are applying has the following tag at
the top, before all other content:
<!doctype html>
That's it. This tag is referred to as an HTML5 document type declaration or “doctype.” In
older documents, you'll occasionally come across other lengthier doctypes, which are com-
monly used for XHTML or HTML4 web pages. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can do some further reading on doctypes at
SitePoint's HTML reference
but, for now, all
you need to know is that, if you use the simple HTML5 doctype, your pages will render in
standards mode and your CSS will be much easier to code and debug.
A Skeleton for Our Sample Website
We've covered quite a bit of ground, already, without touching our sample project. Let's con-
clude this chapter by using some of the selectors we've learned about to build a CSS skeleton
for the RecipeFinder website.
First, we need to add an external CSS file to our project that'll help us achieve similar results
in almost all browsers and on any device. Of course, not every web browser supports every
CSS feature (more on this later,) but we can make a fairly normalized cross-browser start to
our project by using something called a “CSS reset.”
What do we mean by "normalized cross-browser"? Well, every browser applies certain styles
to elements on a web page by default. For example, if you use an unordered list (the
<ul>
