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

In CSS, 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.

Here is a detailed explanation of various types of style sheets that we use for styling HTML web pages:

Default (aka User-agent/Browser) style sheet: First thing, Default style sheet is also known as Browser style sheet Or User-agent style sheet. This is the style sheet which browser applies by Default for every web page which it renders. So if as the author of a web page you don't apply any styling, even then it is not styleless. It still applies the styling details present in the default style sheet installed within the browser. We can assume that it must be containing some styles for all standard HTML tags e.g. <span>, <p>, <h1> etc. This SO post provides great details about how the default style sheets of various browsers look like.

Look at the following HTML page. I've created a very basic HTML table with no styling at all:

<html>
  <head>    
  </head>

<body>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

But still you see that headers of the table are shown in bold. That is coming from browser's default style sheet.

enter image description here

User style sheet: Now the second level is user style sheet. Browsers give you the option of extending the browser's default style sheet. For e.g. in internet explorer you can go to Tool > Internet Options > General Tab > Accessibility button > Accessibility Window > User style sheet section > "Format documents using my style sheet" check-box.

enter image description here

So for the same html tag if I provide a different style in my own style sheet ("D:\myuserstylesheet.css" in this case) then same it will start overriding it.

myuserstylesheet.css looks like this:

`td
{
    color: green;
}`

Now, If I load the same web page containing a simple table after making these changes in internet explorer browser settings then the styles present in user style sheet start overriding the browser style sheet as shown below:

enter image description here

Google Chrome browser stopped supporting user style sheets couple of years back. More details can be found here.

Author style sheets:Then comes author style sheet which is what you have defined in your web site as a creator/author of the website. This comes in three flavors:
- In-line : Defined inside the tag itself e.g. <div style="width:20px;height:20px;background-color:#ffcc00;"></div>
- Internal/Embedded : CSS styles defined in <style> tag inside <head> tag of an html page.
- External: CSS styles defined in separate physical files (e.g. abc.css) which are applied to an html web page using link tag present inside <head> tag : <link rel="stylesheet" type="text/css" href="abc.css">

Corollary 1: The value of an HTML element's style (e.g. font, color) can be set using any of the above mentioned type of style sheets. Let's consider a td tag for this discussion. Its style has an attribute named color. So something like this is possible:

Default/Browser style-sheet says:

td
{
    color: black;
}

User style-sheet says:

td
{
    color: green;
}

Author style-sheet says

td
{
    color: blue;
}

This results in conflict or collision. Browser will get confused whether to show the td element in black, green or blue color. To resolve this conflict, all browsers follow a predefined a precedence/priority order(from highest to lowest) as below:

Author style sheet
User style sheet
User-agent (browser) style sheet

So, since author style sheet has highest precedence, td will be shown in blue color.

There is a caveat to this. For !important styles this priority order is just reverse i.e.

User-agent (browser) style sheet
User style sheet
Author style sheet

Now let us take up the same example to understand it:

Default/Browser style-sheet says:

td
{
    color: black !important;
}

User style-sheet says:

td
{
    color: green !important;
}

Author style-sheet says

td
{
    color: blue !important;
}

In this case, since the priority order is just reverse so the td tag will appear black.

Note: !important rule styles always have higher precedence than normal styles.

Corollary 2:

There is another thing to know about Author style-sheets. Author style-sheets are categorized into three types depending upon their location in the website source code:

Inline: Take a look at the below element:

<td style="color:orange"></td>

This says that this particular td tag should have orange color.

Internal: The style tag in head tag says that every td tag on this web page should be shown in red color

<html>
  <head>  
  <style>
td {
  color: red;
}

</style>
  </head>

<body>

 <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

External: It is a separate physical CSS file having extension .css. It is present in your website source code and referred by any HTML page of the website using link tag as shown below:

//mystyle.css
td {
      color: yellow;
    }

<html>
      <head>  
      <link rel="stylesheet" href="mystyle.css">
      </head>

    <body>

     <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

    </body>
    </html>

So here the external style-sheet mystyle.css has been refereneced in the web page using link tag. The style-sheet says that every td tag on the web page should be shown in yellow color.

This also results in conflict or collision. Browser will get confused whether to show the td element in orange, red or yellow color.

To resolve this conflict, all browsers follow a predefined precedence/priority order(from highest to lowest) based on collision resolution rule. Whenever there is a collision of equal specificity among different types of Author style sheets then their proximity to the HTML element (Textual order) matters while deciding the precedence/priority as shown below:

In-line (Closest to the HTML tag. In fact it is inside the HTML tag itself)
Internal/Embedded (relatively farther from the HTML tag)
External (Farthest from the HTML tag as it resides physically outside your HTML web page.)

Note: You can read more about specificity calculation in CSS here.

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

Related

Recent Posts