What is a user agent stylesheet?

Question

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?

[chrome : how to turn off user agent stylesheet settings?](http://stackoverflow.com/questions/18006356) — givanse, Apr 30 '14 at 05:45
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, Jun 14 '16 at 08:06
Related post [here](https://stackoverflow.com/q/18252356/465053). Understanding how user-agent (or browser) style sheet is different from user and author style sheets will help conceptualize things easily. — RBT, Nov 09 '17 at 09:00

score 295 · Accepted Answer · edited Apr 26 '20 at 14:27

295

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.

edited Apr 26 '20 at 14:27

Peter Mortensen

30,738
21
105
131

answered Sep 25 '12 at 12:12

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 Sep 25 '12 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. – Sep 25 '12 at 12:21
2

Resetting styles can cause weird results with form fields, particularly around field borders or multi-part elements like type="file". – Tim has moved to Codidact Oct 28 '14 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 Mar 08 '15 at 14:17
5

See what Chrome sets by default to the webpage: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css – Santosh Kumar Jul 07 '15 at 06:44
1

Although this info is helpful, it doesn't really answer the question "What is a user agent stylesheet?" – Kenneth Stoddard Jul 26 '16 at 13:53
For those wondering about a reset vs. normalize, this question has some good answers: https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css – Dave Powers Jun 07 '19 at 16:26

score 194 · Answer 2 · edited Apr 26 '20 at 14:28

194

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.

edited Apr 26 '20 at 14:28

Peter Mortensen

30,738
21
105
131

answered Oct 22 '15 at 14:11

Jesper Mygind

2,406
1
18
20

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 Nov 08 '15 at 18:25
4

Adding solved a very weird tr/td vertical alignment problem I had. Thanks for this answer. – Ralph Tee Jun 16 '17 at 14:14
4

This is nitpicking, but fixed the problem for me. – Steve Zelaznik Feb 20 '18 at 02:29
14

I had enabled but still had to normalise. – AntikM Nov 06 '18 at 14:06
1

A detail that cost me several minutes to figure out: must be at the very top. If there is an error message first, it fails. (Happened to me with Joomla maximum error messages) – Ralf Apr 03 '19 at 13:46
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](https://html.spec.whatwg.org/) for the substantial details.) – Chris Morgan Sep 19 '19 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 Nov 07 '19 at 06:38
1

My code had the same symptoms as the OP's and the comment by @Sebas above put me on the right track - in my case, when my 4yo daughter had bashed the keyboard while I worked she inadvertently added a stray letter at the very start of line 1 of my file and I didn't notice... (facepalm) Cue an hour of unsuccessful troubleshooting before I finally spotted the error after investigating if there was anything entered before the line... Thanks. – Stiv Mar 25 '20 at 17:00
1

@Stiv This will go into history as (among other things of course) the period where people all over the world tried to work while taking care of their quarantined kids. – Jesper Mygind Mar 25 '20 at 19:38
Brilliant! Today my website suddenly displayed all tables too small. Yesterday it was fine. Googling “user agent stylesheet” brought me straight here. And was the answer. An “innocent” change that I had made had accidentally prepended a line of HTML before the . – Eric P Smith Nov 23 '20 at 23:50
This is the exact answer! – duckegg Nov 30 '20 at 15:19
This answer made check the DOCTYPE at the top of my page, whereupon I found some garbage characters at the very start of the page which shouldn't have been there. Thanks. – Richard Apr 30 '21 at 16:16

Jukka K. Korpela · Answer 3 · 2014-04-30T07:11:29.477

135

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

edited Apr 30 '14 at 07:11

answered Sep 25 '12 at 16:25

Jukka K. Korpela

195,524
37
270
390

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 Apr 30 '14 at 07: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 Apr 30 '14 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 Nov 09 '21 at 22:41

score 55 · Answer 4 · answered Aug 13 '15 at 07:45

55

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

<!DOCTYPE html>
<html>...

answered Aug 13 '15 at 07:45

Daniel

2,343
2
20
24

13

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 Aug 17 '15 at 09:25

Kenneth Stoddard · Answer 5 · 2023-02-24T22:26:30.420

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.

Ebrahim Byagowi · Answer 6 · 2023-08-19T03:38:32.547

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

Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css

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.

score 15 · Answer 7 · edited Apr 26 '20 at 14:27

15

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

edited Apr 26 '20 at 14:27

Peter Mortensen

30,738
21
105
131

answered Sep 25 '12 at 12:07

BenM

52,573
26
113
168

score 4 · Answer 8 · edited Apr 14 '14 at 11:02

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.

score 3 · Answer 9 · edited Apr 26 '20 at 14:37

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.

Brent Miller · Answer 10 · 2020-04-29T20:33:35.633

2

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.

edited Apr 29 '20 at 20:33

answered Apr 16 '20 at 15:40

Brent Miller

73
6

Shouldn't this be a comment instead of an answer? – Peter Mortensen Apr 26 '20 at 14:43
1

@PeterMortensen yes, but I can't leave comments - not enough reputation. – Brent Miller Apr 29 '20 at 20:24
Maybe it should be a comment... But, this solved an issue I have struggled with for couple of hours. – Woody Jul 13 '21 at 18:55

score 0 · Answer 11 · edited Apr 26 '20 at 14:32

0

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.

edited Apr 26 '20 at 14:32

Peter Mortensen

30,738
21
105
131

answered Apr 20 '18 at 18:19

firstpostcommenter

2,328
4
30
59

score 0 · Answer 12 · answered Oct 09 '20 at 16:31

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

score 0 · Answer 13 · answered May 11 '23 at 15:01

I found a case where user agent css was overriding my built-in or defined CSS and it turned out I was using "local overrides" feature in Chrome by accident on that page.

As such, of course only the user agent css was showing because the override was not allowing me to make changes.

score -1 · Answer 14 · answered Feb 05 '23 at 09:42

Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called . And if you look through its source code you will be able to find the default stylesheet.

check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop

The question is why this stylesheet is somehow more important than my css rule applied by a class, but without `!important` mark :) — Espeon, Feb 14 '23 at 15:42

score -4 · Answer 15 · edited Apr 26 '20 at 14:41

-4

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">

edited Apr 26 '20 at 14:41

Peter Mortensen

30,738
21
105
131

answered Jan 16 '20 at 17:07

Vinkal Chandel

9
3

4

Please edit to explain how this works and why it helps. – Yunnosch Jan 16 '20 at 18:26

score -7 · Answer 16 · edited Apr 26 '20 at 14:29

-7

Put the following code in your CSS file:

table {
    font-size: inherit;
}

edited Apr 26 '20 at 14:29

Peter Mortensen

30,738
21
105
131

answered Feb 08 '16 at 10:38

Srikanth

7

2

This does not really add anything new to this post. There is already an accepted answer, as well as 5 other answers, so please don't post late answers. – Kaspar Lee Feb 08 '16 at 10:46

What is a user agent stylesheet?

16 Answers16

Linked

Related