CSS Debugging Series

This is the beginning of a series on troubleshooting / debugging CSS Styles. But before we start going too deep into it, we'll start with a high level overview of where the styles are coming from.

What is CSS?

By now you are well aware that CSS is used to style webpages, you have even built some examples of this.

Some questions you've probably never asked.

• Why are links blue? or why when I hover a link does my mouse change?
• Why is the font of my site "Times New Roman" before I change this?
• Why when I have a <h1> and a <h2> is there spacing between these?

User Agent Stylesheet:

User Agent Stylesheet is something you'll come across a lot in your journey, and simply put, it's the browser stylesheet (or CSS file).

The browser has some built in styles that are used to give some default behavior we all know and love. Like links being blue, or having an underline in the text, and your mouse cursor changing when you hover over the links, this is CSS, but it's the browsers built in styling / User Agent Stylesheet that causes this.

CSS Resets:

CSS resets are a tool to use the undo some of the default behavior of the browser, it is just CSS nothing super fancy, but it is placed at the top of your CSS file in order for the cascade the take effect and remove all the default styling before you re-apply your preferred styling.

A minimal example of this you've already come across in the Getting Started With CSS Article

* {
    margin: 0;
    padding: 0;
}

This will undo all the margin and padding of every element and remove the default spacing between all the elements (margin).

Recap:

When a webpage loads the browser applies all the default styling (User Agent Stylesheet), then your CSS Styles get applied.