Hour 4. Understanding Normalize.CSS and the Basics of Bootstrap CSS
What You’ll Learn in This Hour:
What Normalize.css is and where you can get it
What a CSS reset is
How Normalize.css differs from a CSS reset
The basics of Bootstrap infrastructure
How to use CSS to change the Bootstrap defaults
One of the key features of Bootstrap is the Normalize.css file. This hour you will learn what Normalize.css is and how it’s used in Bootstrap. You also will learn how Bootstrap handles CSS so you can more effectively style your web pages.
What Is Normalize.css?
Normalize.css is a small CSS file that web designers can use instead of CSS resets to force browsers to render HTML elements consistently. It is included in Bootstrap by default, but you can find it at http://necolas.github.io/normalize.css/.
Note: Normalize.css Is Very Small
You should not be worried about overloading your web pages with Normalize.css because this file is very small. The full version, with all the white space characters and copious comments, is only 7.8KB. When minified, the file is reduced to only 2.3KB.
What Is a CSS Reset?
One of the challenges of designing for modern web browsers is that every browser displays things slightly differently. For example, some browsers indent lists with left padding, while others use left margins. Browsers add different amounts of top and bottom margins on headings, indent blockquotes different amounts, and have different default line heights.
A CSS reset is a CSS file that attempts to reset all HTML elements to a consistent baseline. Then any CSS that you add after the reset will be applied in the same way in every browser.
Pros and Cons of CSS Resets
The most obvious reason to use a CSS reset is what I already stated—all the elements are set to the same baseline, so when you add additional CSS after the reset, the styles will look the same in every browser.
However, CSS resets mean you’re going to cover the same styles multiple times. And in fact, you might have to style things that you could otherwise have left alone if you don’t mind how the browsers handle it. Also, if the reset is used poorly, it can end up overwriting styles you need for your design.
Normalize.css Isn’t Just a CSS Reset
Normalize.css is an alternative to traditional CSS resets. It preserves useful defaults in browsers. This makes it much less annoying. Figure 4.1 shows you the same web page first without a reset style sheet and then with one.
As you can see, with the CSS reset style sheet all the text is the same size, the line height is always the same throughout the document, and everything is smashed up against the left edge of the browser window.
While all the styles are set to a consistent baseline, you are required to add back in some CSS to create a typographical system, such as with headlines and subheads, readability with line-height and margins, and so on.
Normalize.css keeps the styles that are useful for design, like typography. It also attempts to make the styles consistent between browsers. So rather than simply zeroing out the font sizes, it attempts to make them consistent.
Normalize.css also corrects common bugs in desktop and mobile browsers that would typically be out of scope for a browser reset. It sets display settings for HTML5 elements and corrects the font size for preformatted text, SVG overflow in Internet Explorer 9, and a lot of form bugs.
Figure 4.2 shows the same page as in Figure 4.1 only using Normalize.css.
As you can see, the headlines, colors, and some indents are still preserved, which keeps the page readable. But the styles will be more consistent across different browsers. This way, if you don’t want to add any additional styles, the page will still look okay and be readable for your customers.
Understanding the Bootstrap Infrastructure
As you’ve learned in previous hours, Bootstrap is a framework to help you build web pages. However, Bootstrap makes some assumptions about the HTML and CSS that you need to be aware of to use it effectively.
Bootstrap Uses HTML5
Bootstrap is an HTML5 framework. This means that all your pages must have the HTML5 doctype:
<!doctype html>
Bootstrap also recommends that you set the language on your HTML container element, as you learned in Hour 3, “Build Your First Bootstrap Website with the Basic Template.”
Mobile First
Bootstrap’s philosophy for building web pages is “mobile first.” This means that web pages should be designed for the smallest display first and then features added for larger displays. Mobile styles are not optional within Bootstrap; they are the core of the framework. If anything, desktop styles are the optional elements.
This means that, as you learned in Hour 3, you need to include the viewport meta tag to your documents as well:
<meta name="viewport" content="width=device-width, initial-scale=1">
This meta tag ensures that mobile browsers render the pages correctly and display the right zoom.
Typography and Basic Link Styling
I will cover Bootstrap typography in more detail in Hour 7, “Bootstrap Typography,” but there are some basics you should be aware of:
Bootstrap automatically sets the background color on the <body> element to white (#fff).
Bootstrap uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base.
Links are only underlined when they are hovered over with :hover.
And the global link color is set via @link-color.
You can change these styles with a separate CSS file or with Less in the scaffolding.less file. I’ll go into how to do that in more detail in Hour 23, “Using Less and Sass with Bootstrap.”
Try it Yourself: Modify the Default Bootstrap Settings with Custom CSS
1. Open your text editor and paste in the code from Listing 4.1.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>A Basic Bootstrap page</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>A Basic Bootstrap Page</h1>
<p>
Lorem <a href="#">ipsum dolor sit</a> amet, consectetur
adipiscing elit. Donec ut elit sed turpis sodales mattis.
Pellentesque ex ipsum, pretium eu turpis non, interdum laoreet
lacus. Praesent faucibus, nisl ac tempor bibendum, felis turpis
fringilla tellus, eu tristique risus magna sit amet velit.
Suspendisse eget libero ut purus egestas tempor quis et arcu.</p>
<p>
Etiam mollis tortor eget arcu sodales, nec commodo
<a href="#">tellus feugiat</a>. Fusce ornare sed mauris at
efficitur. Sed in tortor eu diam elementum ultrices. Quisque
euismod pharetra metus sit amet sollicitudin. Fusce sollicitudin
velit lorem, non condimentum justo congue id.</p>
<ul>
<li><a href="#">Lorem ipsum</a> dolor sit amet, consectetur
adipiscing elit.</li>
<li>Duis tristique augue ac turpis vulputate interdum.</li>
<li>Maecenas bibendum mauris tincidunt, aliquet metus ut,
pellentesque neque.</li>
</ul>
<dl>
<dt>Proin <a href="#">placerat</a> ligula ut commodo
volutpat.</dt>
<dd>Proin sed tortor eget enim maximus efficitur vitae porta
purus.</dd>
<dt>Phasellus placerat ligula ut justo varius, at pretium dolor
interdum.</dt>
<dd>Proin hendrerit augue sed massa pellentesque
porttitor.</dd>
</dl>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2. Verify that the Bootstrap CSS and JavaScript files are in the right locations. Change the HTML if you need to.
3. Open a new file in your text editor, and name it styles.css. Save that file to the same directory as your Bootstrap CSS files.
4. Add the styles in Listing 4.2 to your styles.css file.
LISTING 4.2 CSS File to Modify Default Bootstrap Styles
a:link, a:visited, a:active {
text-decoration: underline;
}
body {
background-color: #CCF6FA;
margin-left: 0.5%;
}
ul {
padding-left: 0;
margin-left: 2%;
}
dd {
text-indent: 3%;
}
5. Add a link to the new stylesheet after the Bootstrap CSS file link:
<link href="tyb-code4.2.css" rel="stylesheet">
6. Test the page in a browser to make sure it looks like you want it. Figure 4.3 shows how the page looks first without and then with the custom styles.
Summary
In this hour you learned how Bootstrap uses the Normalize.css file to make HTML elements have a standardized look and feel no matter which browser views them. Normalize.css is an alternative to CSS resets, which can be more work for the web designer.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. If I use Normalize.css, why do I need Bootstrap?
A. Bootstrap uses Normalize.css as just a small part of the styles that you can use to manage your designs with Bootstrap. Many people use Normalize.css on their web pages, and that is always an option, but you lose the benefits of Bootstrap.
Q. What if I want to reset the styles away from Normalize.css?
A. You can always add your own styles as I describe in the previous section. But because Normalize.css works as an alternative to CSS resets, that will add more work than you really need.
Q. You mention only a few basic styles that Bootstrap applies, aren’t there more?
A. Yes, there are a lot of styles within Bootstrap. And you will learn about a lot of them in Part 2, “Building and Managing Web Pages with Bootstrap.”
Quiz
1. True or False: Normalize.css is a CSS reset file.
2. True or False: Normalize.css will help HTML5 elements display in Internet Explorer 9.
3. Which of these is not something a CSS reset file will do?
a. Set the margins on a page to zero
b. Set the font sizes to be all the same
c. Make HTML5 elements work in older browsers
d. Make all browsers display blockquotes in the same fashion
4. Which of the following is not a reason to avoid using CSS resets?
a. They are too hard to use.
b. You might have to style things multiple times.
c. Badly written resets may force you to write styles over and over.
d. They reset more than most designers need, adding work.
5. True or False: Normalize.css keeps the styles that are useful.
6. Which of the following is not a bug that Normalize.css fixes?
a. Fixes display settings for HTML5 elements
b. Corrects the font size for preformatted text
c. Fixes SVG overflow in Internet Explorer 9
d. Corrects multiple form bugs
e. None of the above
7. What does it mean that Bootstrap is “mobile first?”
a. It loads mobile pages first.
b. It puts mobile designs at the same priority as non-mobile.
c. It treats mobile devices as more important than desktop browsers.
d. It is a mobile design framework.
8. What color does Bootstrap set the background to on web pages?
a. White.
b. Gray.
c. It depends on the theme.
d. It doesn’t change the color.
9. True or False: Links are automatically underlined in Bootstrap.
10. True or False: It is impossible to adjust the default styles that Bootstrap adds.
Quiz Answers
1. False. Normalize.css is an alternative to a CSS reset file.
2. True. Normalize.css sets the display on HTML5 elements to block so that they will display more correctly in Internet Explorer 9.
3. c. A CSS reset does not make HTML5 elements work in older browsers.
4. a. CSS resets are as easy to use as any other template; you just copy and paste it into your web documents.
5. True. The primary difference between Normalize.css and a reset CSS file is that Normalize.css keeps the default styles that are useful.
6. e. None of the above. Normalize.css fixes all those bugs, plus more.
7. b. Bootstrap is “mobile first” because it treats mobile devices as just as important as non-mobile and does those design styles first before adding non-mobile styles as add-ons.
8. a. Bootstrap sets the body background color to white (#fff).
9. False. Bootstrap removes all the underlines on links except for the :hover status.
10. False. You can adjust the default styles using Less or using your own custom CSS style sheet.
Exercises
1. Open one of your Bootstrap files in a text editor. Make some changes to the default Bootstrap files by adding a custom CSS file to the page below the Bootstrap CSS.
2. Build a new web page and add a link to Normalize.css as your style sheet. The easiest way is to use a content delivery network (CDN) such as
<link
href=https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css
rel="stylesheet">