Customizing the CSS reset
Let's update the line-height and font-family property on the body element, which will establish what is called "vertical rhythm" and make Arial the default font-family for all the elements:
body {
line-height: 1.4;
font-family: Arial, Helvetica, sans-serif;
}
You will then see how it affects the text, chiefly adding some vertical space between rows lines of text:
Establishing these defaults early for everything is nice; that way, you don't have to describe line-height and font-family over and over again for each element throughout your CSS. Note that not all properties act like font-family and line-height and are inherited by child elements; only certain properties have this effect, mainly text-level properties behave like this. In this case, we set those properties on the body element, but they cascaded down to h1, h2, and our p, giving them all the Arial font and line-height of 1.4.
I'd like to add in a couple more rules sets to our reset. Let's make some room down at the bottom of the reset. The first one I'd like to add is clearfix, as shown in the next piece of code. I'm not going to go into clearfix now. I'll explain it in depth in Chapter 3, Creating a Page Layout with Floats. This default is very helpful for clearing floats; we're going to need it:
/* micro clear fix */
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
The next thing we'll do is set the max-width for media elements to ensure responsive media. I'll discuss this more in Chapter 6, Becoming Responsive:
img, iframe, video, object {
max-width: 100%;
}
Finally, I'd like to un-reset our strong and b elements and make sure that they do have a font-weight of bold:
strong, b {
font-weight: bold;
}
So that's it about the reset. Now, jumping over to our HTML, I want to elaborate on two more pieces of our base layer that aren't in the reset:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- description -->
<title>Section 2-Ramping Up - Mastering CSS</title>
<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css">
<!-- stylesheets for older browsers -->
<!-- ie6/7 micro clearfix -->
<!--[if lte IE 7]>
<style>
.grouping {
*zoom: 1;
}
</style>
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
First, we have a piece of clearfix that handles IE 7, as shown in the following code. You don't need to know exactly what this is doing, but you may want to know that it makes clearfix work in IE7. If you're not supporting older versions of IE, you can omit that part. Again, we'll look at clearfix in detail in Chapter 3, Creating a Page Layout with Floats:
<!-- stylesheets for older browsers -->
<!-- ie6/7 micro clearfix -->
<!--[if lte IE 7]>
<style>
.grouping {
*zoom: 1;
}
</style>
<![endif]-->
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
If we zoom in to this code, it happens to be an embedded stylesheet. You can see there is an opening and closing style tag with a rule set in between:
<style>
.grouping {
*zoom: 1;
}
</style>
Outside of the embedded stylesheet, the line that precedes the opening style tag is what's called an IE conditional comment, and it says this: "if lower than or equal to IE 7, see the rule below."
<!--[if lte IE 7]>
Underneath the rule set, we have a script pointing to the HTML5 Shiv library, which makes older versions of IE understand the newer HTML5 elements:
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
This is also inside of an IE conditional comment, but it's targeting all versions of IE. Actually, IE 10 and higher don't support IE conditional comments anymore, so this script only supports IE9 and lower versions; however, it makes sure our HTML5 elements are supported in older browsers. Again, if you aren't supporting these older browsers, feel free to omit that as well.
In this section, we dissected our CSS resets and how to get your base layer ready for writing code. Now, let's take a look at the Chrome DevTools section.