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

  1. The Meyer Reset is almost certainly the most popular. It’s very simple and basically removes every default style.
  2. 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.
  3. Reboot, Resets and Reasoning is a CSS tricks article that goes a little more in depth, and mentions a few other popular resets.
  4. Maybe more trivial than useful, this Browser Default Styles site is fun to play with.

Additional Resources

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

Knowledge Check

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.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started
Thinkful Logo

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship