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.
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 (
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!
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.