652

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?

Improve this question
4
  • 4
    chrome : how to turn off user agent stylesheet settings?
    – givanse
    Commented Apr 30, 2014 at 5:45
  • 10
    Note also that on Chrome (51) you get only those two table entries when you don't have a doctype declaration. Otherwise, you only get the second one.
    – John
    Commented Jun 14, 2016 at 8:06
  • 1
    Clear the chrome cache in more tools -> Clear browsing data
    – doford
    Commented Mar 4, 2017 at 14:05
  • 3
    Related post here. Understanding how user-agent (or browser) style sheet is different from user and author style sheets will help conceptualize things easily.
    – RBT
    Commented Nov 9, 2017 at 9:00

10 Answers 10

Reset to default
300

Different browsers set different default CSS rules with their own default stylesheets. 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.

Improve this answer
6
  • Thanks Oli. Is there any side-effect of removing browser's default CSS? I guess it is not recommended, is it? I need to decide between your ans (reset) or @BenM answer override with our own style. Any idea which is recommended approach?
    – Kapil Sharma
    Commented Sep 25, 2012 at 12:19
  • 21
    I always reset/normalise my CSS before every project, that way you have an "almost" level field across browsers. I have never heard of a negative "side-affect" as such, I'm sure if you have a quick look on Google you will find that it is recommended.
    – user818991
    Commented Sep 25, 2012 at 12:21
  • 2
    Resetting styles can cause weird results with form fields, particularly around field borders or multi-part elements like type="file".
    – I answer wrong - have fun
    Commented Oct 28, 2014 at 19:03
  • 7
    Even though reset/normalize might help, it doesn't really answer the question, of why the user agent stylesheet is changing? I have the same problem where on they UA styles become different for pre-rendered pages I use for SEO. Any ideas on why it changes?
    – Yaron
    Commented Mar 8, 2015 at 14:17
  • 5
    See what Chrome sets by default to the webpage: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
    – Santosh Kumar
    Commented Jul 7, 2015 at 6:44
200

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.

Improve this answer
4
  • 11
    That's a great hint. You saved me some time of research. Worth noted that in my case I had that doctype declaration but I had a script before. It looks like the DOCTYPE must happen first thing in the page to enter into consideration.
    – Sebas
    Commented Nov 8, 2015 at 18:25
  • 15
    I had <!DOCTYPE html> enabled but still had to normalise.
    – AntikM
    Commented Nov 6, 2018 at 14:06
  • This answer is just not true. Quirks mode doesn’t change how user agent styles are applied, and whether it’ll take some of those styles in preference to your styles; it just alters the base stylesheet that is used. (It does a very few other things differently, but not much; refer to the spec for the substantial details.)
    – Chris Morgan
    Commented Sep 19, 2019 at 13:27
  • 1
    @ChrisMorgan quoting from the specification to which you have linked: "DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications". In an ideal world DOCTYPE wouldn't be necessary. But to claim the answer is "just not true" is quite bold IMHO, especially considering the number of upvotes.
    – Jesper Mygind
    Commented Nov 7, 2019 at 6:38
139

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).

Improve this answer
3
  • 1
    @givanse, no, you see user agent style sheet effects when you don’t override them, and your sample markup is no exception. It will be parsed as one li element containing two ul elements with just text content; they are styled by user agent style sheet, but this styling can be overridden. (Whether the markup is invalid depends on context and on HTML version; but this does not affect styling.)
    – Jukka K. Korpela
    Commented Apr 30, 2014 at 7:14
  • @givanse, that problem is not relevant to the question “what is a user style sheet”. If you think the problem is important, post it as a new question, with sufficient details. But the bullet in your jsfiddle is simple a bullet for the li element, and your style sheet does not override it.
    – Jukka K. Korpela
    Commented Apr 30, 2014 at 17:33
  • In my situation, there was a CSS specifier problem, but this information about the User Agent was also helpful.
    – Nora McDougall-Collins
    Commented Nov 9, 2021 at 22:41
57

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

<!DOCTYPE html>
<html>...
Improve this answer
1
  • 14
    Can you please explain how exactly it is supposed to work? How HTML 5 is associated with undefined styles? I'll confirm but do you have any ready fiddle to confirm it?
    – Kapil Sharma
    Commented Aug 17, 2015 at 9:25
50

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 also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.

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.

Improve this answer
0
48

Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:

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.

Improve this answer
0
17

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

Improve this answer
4

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.

Improve this answer
3

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.

Improve this answer
1

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.