Differencebetween Default, User and Author Style Sheets

What is the difference between default, user and author style sheets?

Default style sheets are supplied by the browser vendor.

User style sheets are supplied by the user of the browser.

Author style sheets are supplied by the author of a webpage.

What's difference between author's style , reader's style, agent's style (or author, user, user-agent styles)

1. The user agent is the application (usually a browser, such as Chrome or Firefox) that you are viewing the website with. User agents have a default stylesheet. You can inspect its properties with a tool like Chrome's Developer Tools feature.

   The "reader" is the web surfer viewing your site. Your site's visitors can optionally set their own stylesheets or custom rules (such as system colours or font preferences). They might do this out of personal preference, or because they have accessibility requirements.

   The author's stylesheet is the one explicitly linked to in the HTML of the website itself. I.e., it's the one that you created.

2. Normally, for good reason, the author stylesheet takes precedence over user agent and reader stylesheets. However, readers have the option to set styles that authors can't override. This is also for good reason, as people with visual impairments or other accessibility issues will need certain styles to be set across all pages.

CSS cascading order - author vs user

Author

The developer of the original CSS code for that application. Let's say the Front-end developer of StackOverflow website is the Author here.

Any changes made on Author code will effect the application style for
everyone.

User

You want to have custom style for the pages that you view. Eg: If you need to change the background color of Stackoverflow website, you can use Stylish extension to append your custom style rules. Now you are the user here.

You can filter the user styles in the Style Side Panel which shows the system applied styles as well as user defined custom CSS.

Any changes made on this code will affect only your browser.

Why is the user agent style sheet the last one style sheet to be applied?

@GoldShip, the answer is here:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Quote from above link:

6.4.1 Cascading order

To find the value for an element/property combination, user agents must apply the following sorting order:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.

2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

   1. user agent declarations
   2. user normal declarations
   3. author normal declarations
   4. author important declarations
   5. user important declarations
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Style sheets priority order

The correct order of precedence is, from least important to most important:

1. User Agent
2. User Normal
3. Author Normal
4. Author Important
5. User Important

As defined in the specification

How to identify the source of Author Stylesheet styles

I'm not sure if this is 100% accurate, but I believe that Safari will not show the name of the css file if it is named default.css. In my case, Chrome tools displayed the file name (not just "Author Stylesheet").

What is a user agent stylesheet?

What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.

Why does the UA's link color beat an author's color for (say) body?

There is a second order to the cascade and that's the order of which selectors override which other selectors.

For example, if you define in your stylesheet:

body { color: green; }
h1 { color: purple; }

the h1 has higher order of importance and will OVERRIDE the greenness of the body.

As to the general order of the cascade, this is the correct order, but you have to realize that user agent declarations vs. the things you define in a stylesheet are overridden SEPERATELY FOR EACH ELEMENT.

For example, let's say that the user agent has defined:

body { font-size: 10px; }
h1 { font-size: 20px; }
a { color: purple; }

and you are defining in your stylesheet:

body { font-size: 30px; color: green; }

Everything in the body will be 30px green except for those other two tags that the user agent stylesheet has already defined. You have to override ALL of them. Not just one user agent definition must be overridden but ALL OF THEM have to be overridden. Your styles WILL take precedence over the user agent stylesheet. Just gotta be careful to catch them all.

This is officially termed "inheritance". You're right, I guess the writers of w3 didn't specify explicitly how only one element at a time from the UA stylesheet gets overridden by your own personal stylesheet. They maybe thought it was obvious but they should probably add into the official documentation how the two should "mesh together", here, in this official documentation of inheritance: w3.org/TR/CSS2/cascade.html

They did mention it in the wiki, I think we've discussed, so I'll include it in the answer, as well: w3.org/wiki/Inheritance_and_cascade

---

Related Topics