Where do Browser Styles Come From?

Not sure where that default 8px of margin on the body comes from? Here's how to find out!

Every browser provides a User Agent (UA) Stylesheet to give HTML elements their natural shape, and make our sites more readable by default. When we start a project with a reset or normalization stylesheet, it's the UA styles that we are re-setting or normalizing. But how can we see these UA styles? Miriam Suzanne will show you how to find them online, inside Firefox itself, or even in developer tools as we debug our site styles.

#css #miriamsuzanne #firefoxdevtools

[victoralmeida]

Dear Mozilla staff, thank you so much!! I'm very grateful for all channel videos!!
I'm studying heavy this entire week getting prepared for job interviews, and have to say I'm enjoying the providential explanations of this channel about web development.
You guys rock!

[dwayne]

These videos are really helping me to stay engaged with the content on MDN as I go through the CSS tutorial. Great stuff.

[kyefang]

Wow, this is amazing introduction. Love your presentation style, example of concise articulation. Well done.

[cmdaltctr]

Thank you! I am learning web development, and whilst inspecting a website in Firefox, I didn't see the UA stylesheet until you pointed out how to enable them. :-)

[janarthkumaresan]

Very informative! Thank you for the video!

[haydennharper]

Thank you for this informative video. And your nails are so fierce. Omg I need a manicure like, pronto!

[davidgarciacancio]

Thanks very much; very useful information.😀

[warrenski]

Does anyone know how to toggle user agent styles in Chrome's dev tools? I can't seem to find the setting.

[alimansourey]

Thank you, I would like to add that in computed styles tab the propeeties that have no black arrow ( not explicitly set neither by you nor by the browser) are the initial values as documented in CSS Specifications .

[CirTap]

IE styles are stored as a text resource in one of the dll files in its program folder. Forgot the name. I assume that's also the case for EdgeHTML. Do a string search/grep for "display" or "list-style" and you'll find them.
I used to dig them up since ie3 until ie6, copy them to a separate text file for comparison, after that nothing really changed in any browser so I no longer bothered. Even when the new HTML5 elementis came to be. By that time the Firebug extension, Opera's Dragonfly and then Devtools gave me the insight I needed as shown here.

[savvasstephanides]

I never start styling a webpage without doing this at the very top of CSS page first:


*{
margin: 0;
}


Also about 10 years ago, IE used to annoyingly add think borders around every image by default, so I used to also add img{border: 0;} at the top of my CSS. Thank goodness they don't do that anymore.


Great video once again Miriam!

[VoxyDev]

I'm so surprised that you didn't use Chrome!