What is a user agent stylesheet?

CssGoogle Chrome

Css Problem Overview

I'm working on a web page in Google Chrome. It displays correctly with the following styles.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.

Now if I submit a form and some validation error occurs, I get the following stylesheet:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.

Solution 3 - Css

Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.

User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.

So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).

Solution 4 - Css

Marking the document as HTML5 by the proper doctype on the first line, solved my issue.

<!DOCTYPE html>
<html>...

Solution 5 - Css

A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements. It is common to employ a reset style sheet to deal with inconsistencies amongst browsers.

From the specification...

> 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. ~ The Cascade.

For more information about user agents in general, see user agent.

Solution 6 - Css

Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them (and most relevant ones also in today's web):

Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.

Solution 7 - Css

Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.

Solution 8 - Css

Some browsers use their own way to read .css files. So the right way to beat this: If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file. Remember that the commands writen in the .html file is stronger than the command in the .css.

Solution 9 - Css

I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.

I went back and checked my <head> section and my CSS link was like below:

<link rel="stylesheet" href="ex.css">

I included type in it and made it like below:

<link rel="stylesheet" type="text/css" href="ex.css">

My problem was solved.

Solution 10 - Css

I just wanted to expand on the response from @BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.

I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.

The problem went away once I added styles like border: none, etc.

So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.

Solution 11 - Css

Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.

Because you have not specified values for the table element’s box, the default styles have been applied.

Solution 12 - Css

I ran into this same issue, it was because I was working with non-semantic html

<!--incorrect-->
<ul class="my-custom-font">
  <button>
    <a>user agent styles applied instead of my-custom-font</a>
  <button>
</ul>

<!--correct-->
<ul class="my-custom-font">
  <li>
    <a>now inherits from from my-custom-font</a>
  </li>
</ul>

Once the HTML was updated, styles were applied correctly

Solution 13 - Css

I have a solution. Check this:

Error

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Correct

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Solution 14 - Css

Put the following code in your CSS file:

table {
    font-size: inherit;
}
Categories
Recommended Css Solutions
Recommended Google Chrome Solutions

Previous Solution:

What are all the uses of an underscore in Scala?

Scala

Next Solution:

Why does C++ compilation take so long?

C++PerformanceCompilation

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKapil SharmaView Question on Stackoverflow
Solution 1 - CssOliver MillingtonView Answer on Stackoverflow
Solution 2 - CssJesper MygindView Answer on Stackoverflow
Solution 3 - CssJukka K. KorpelaView Answer on Stackoverflow
Solution 4 - CssDanielView Answer on Stackoverflow
Solution 5 - CssKenneth StoddardView Answer on Stackoverflow
Solution 6 - CssEbrahim ByagowiView Answer on Stackoverflow
Solution 7 - CssBenMView Answer on Stackoverflow
Solution 8 - Cssrollin_jeksunView Answer on Stackoverflow
Solution 9 - CssAppy SharmaView Answer on Stackoverflow
Solution 10 - CssBrent MillerView Answer on Stackoverflow
Solution 11 - CssfirstpostcommenterView Answer on Stackoverflow
Solution 12 - Csslfender6445View Answer on Stackoverflow
Solution 13 - CssVinkal ChandelView Answer on Stackoverflow
Solution 14 - CssSrikanthView Answer on Stackoverflow