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

The 2.1 Spec gives a good explanation of each:

Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.

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 style sheet: 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 the author of a web page did not apply any styling from his side, even then the web page will not be styleless. It still applies the styling details present in the default style sheet present within the browser. We can assume that the browser's default style sheet must be containing styles for all HTML tags e.g. <span>, <p>, <h1> etc. This StackOverflow 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 plain HTML table with no styling at all:
```
<html>
  <head>    
  </head>

<body>

 <table>
  <tr>
    <th>First Name</th>
    <th>Last Name</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>
```
Still, you can see that header of each column of the table is being shown in bold. That is happening due to browser's default style sheet which is getting applied behind the scene.
User style sheet: Now the second level is user style sheet. Browsers give you the option of extending the browser's default style sheet e.g. in Internet Explorer, you can go to Tools menu > Click Internet Options > Internet Options window > Click General Tab > Click Accessibility button > Accessibility Window > Check Format documents using my style sheet check-box under User style sheet section.

So if I provide a different CSS style for any HTML tag in my own style sheet (D:\myuserstylesheet.css in this case) then it override the stled defined for that tag in User-agent/default style sheet. The myuserstylesheet.css file looks like this:
```
td
{
    color: green;
}
```
Now, If I load the same web page containing HTML table after making these changes in Internet Explorer browser settings then see how it looks:

Why all the text in the table is green now? This happens because the CSS styles present in user style sheet override the styles present in browser's default style sheet. Microsoft Edge does not support user style sheet. You can read more about it here. Google Chrome 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">

So, this was a brief description of various types of style sheets. Now, I would like to add some more details which will come very handy when you author a website. These are some knitty gritties which come into play when styles get applied to an HTML page. If you're interested in knowing more then please keep reading.

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

Browser style-sheet says:

td
{
    color: black;
}

User style-sheet says:

td
{
    color: green;
}

Author style-sheet says

td
{
    color: blue;
}

This results in a situation which is called style collision or conflict. 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 as below:

Author style sheet (Highest Priority)
User style sheet
Browser style sheet (Lowest Priority)

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

There is a caveat to this. For styles marked with !important property, this priority order gets reversed i.e.

Browser style sheet (Highest Priority)
User style sheet
Author style sheet (Lowest Priority)

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

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>First Name</th>
    <th>Last Name</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>First Name</th>
        <th>Last Name</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?

Tags:

Css

Related

Recent Posts