HTML and CSS Reference
In-Depth Information
element) the browser will display the list with some existing formatting styles, including bul-
lets next to the individual list items (the
<li>
elements inside the
<ul>
). By using a CSS
reset document at the top of your CSS file, you can reset all these styles to a bare minimum.
To put it another way, it clears the ground before we start building something new.
At this stage, it's not necessary to understand everything in a CSS reset. Most experts
wouldn't be able to speak intelligently on every line of CSS in such a document. The import-
ant thing to understand is that it's a valuable tool in your CSS arsenal, and it's imperative that
you use one on every project to avoid as many cross-browser problems as possible.
That said, you can't just throw a CSS reset document into a pre-existing site, and expect it to
"fix" everything. That's not how CSS resets work. A reset is designed to be used as a starting
point, not as a quick-fix for existing websites that aren't behaving in different browsers.
Two of the most popular CSS resets are
Eric Meyer's Reset
and
Nicolas Gallagher's Normal-
ize.css.
Normalize.css is what we'll use as a foundation for our project. So our base HTML
will look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RecipeFinder</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/
↵
svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
Notice the two CSS file references. One is Normalize.css and the other is the stylesheet that
we're going to build. Remember what we talked about earlier regarding the cascade? To en-
