Introduction
Browsers, by default, inject a little bit of style into your web projects. You may not have thought about this specifically, but you have definitely encountered it.
Learning outcomes
- You’ll learn about default browser styles
- You’ll learn how to use a CSS reset to remove or change those default styles
Default styles
When you did the first HTML Recipes project, you would have noticed that some elements already have a little bit of style applied to them. An h1, for instance, is bigger and bolder than regular text. Links (a) are blue and underlined. Lists (ul and ol) both have a bunch of padding surrounding them. Browsers accomplish this by inserting a little bit of CSS into every webpage. (Here is Chrome’s default HTML stylesheet)
The problem with this is that there is no guarantee that different browsers will style everything the same. In general, inconsistencies are going to be pretty minor, but they DO exist. Also, in many cases as a developer, you’re going to end up undoing or redoing all of this default styling to make your site look exactly how you envision it.
To counter this, many developers start their projects with a “CSS Reset”; a file that undoes browser defaults, so that every element behaves the same in every browser.
You don’t have to use a CSS reset. In many cases, you’re going to end up undoing, or redoing a lot of the styles that a reset will provide for you. You can decide whether or not you want to use one on a regular basis, but it’s worth taking the time to dig through a couple now. Understanding exactly how they’re doing what they’re doing is a useful exercise!
Assignment
- The Meyer Reset is almost certainly the most popular. It’s very simple and basically removes every default style.
- Normalize.css is another popular one. It’s a little different in that it doesn’t remove all the default styles, but tweaks them slightly to ensure that browsers are consistent. Currently, the article’s download link is dead. If you want to install normalize.css for your project, download it from normalize.css official website or use the instructions found in the normalize.css repository’s
README.mdfile. If you are unsure which method to use, go with the NPM package install. - Reboot, Resets and Reasoning is a CSS tricks article that goes a little more in-depth, and mentions a few other popular resets.
- Maybe more trivial than useful, this Browser Default Styles site is fun to play with.
Knowledge check
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- A Look at CSS Resets in 2018 is another article that talks about the various resets out there.