26

In the book "CSS the definitive guide" , Chapter 3 which is about "The Cascade" , the book says:

There are three origins: author, reader and user agent. Under normal circumstances, the author's styles win out over the reader's styles. !important reader's styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent's default styles.

I got two questions to ask:

  1. In CSS, What are author's style , reader's style and agent's style?? I really get confused about there three concepts.

  2. According to the above words from the book, seems author's style is stronger than reader's style, but why with !important indicator, the reader's style is stronger than author's style?? I get confused about this.

There's another terminology for this: author, user and user-agent styles

Community
  • 1
  • 1
Mellon
  • 37,586
  • 78
  • 186
  • 264

3 Answers3

29

  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.

g_thom
  • 2,810
  • 2
  • 18
  • 18
8

  • The "user agent's style" is the the default style sheet "built into" the browser (= user agent) that it uses if nothing else is defined.

  • The "author's style" are style sheets included in a web site (by the author of that web site)

  • The "reader' style" is a style sheet that the user (= reader) defines. The user can define styles that should either override the user agents default styles, but also the author styles.

That is where your second question comes in: Normally styles in the reader's style sheet only overrides the browser's default styles (user agent's styles), but by using the !important flag it can also override styles defined by web sites. This is usually done for accessibility: People with bad eye sight, for example, could define larger font sizes or better contrast colors.

However overriding font size and/or colors are a common built-in feature of many browsers, so that users don't need to use the user's style sheet. Thus most browsers have this feature, but it's not very well known and often not included in the user interface. Firefox for example uses a file called userContent.css in the user's profile directory.

IE is actually one of the few browsers that does have this feature in it's GUI: Options, General, Accessibility (I'm not quite sure about the exact names, as I don't have an English IE).

RoToRa
  • 37,635
  • 12
  • 69
  • 105
0

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.

kevinLi
  • 11