Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Fundamental Concepts The Cascade: Specificity and Source Order

Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points
Posted by Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points

How to Access the User Agent Style Sheet?

Hi,

I hear developers talk about styles applied by User Agents. How can we access these rules?

Cheers!

3 Answers

Christopher Vesti
Christopher Vesti
1,622 Points
Christopher Vesti
Christopher Vesti
1,622 Points

User Agent Style sheets simply refer to the default styles that browsers apply to web pages. It is of the lowest importance considering User Styles and Author styles will overwrite these. Each browser is a little different in how it displays "unstyled" html.

If you want to see first hand how browsers display html, create a simple .html document with different header, paragraph and image elements and open it with different browsers.

Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points
Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points

Ok,

Firefox has an option we can toggle on/off to show browser styles.

In Chrome I see user agent stylesheet in the upper right corner. That's the stylesheet I am looking for.

Plain html will show fragments of computed styles like:

p {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

Where is the complete list of rules?

billmei
billmei
3,540 Points
billmei
billmei
3,540 Points

Hi Fábio Tavares da Costa, you can find the full list of all styles in each User Agent Stylesheet in the following locations:

Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points
Fábio Tavares da Costa
Fábio Tavares da Costa
11,985 Points

I will do this,

Still, the style sheet itself should be accessible client side. Maybe a plain html file will make the browse reveal it's CSS URI.