626

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?

4
  • 4
  • 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
    Jun 14, 2016 at 8:06
  • Clear the chrome cache in more tools -> Clear browsing data
    – doford
    Mar 4, 2017 at 14:05
  • 2
    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
    Nov 9, 2017 at 9:00

15 Answers 15

292

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.

7
  • 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
    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". 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
    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 Jul 7, 2015 at 6:44
  • 1
    Although this info is helpful, it doesn't really answer the question "What is a user agent stylesheet?" Jul 26, 2016 at 13:53
189

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.

12
  • 10
    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 8, 2015 at 18:25
  • 4
    Adding <!DOCTYPE> solved a very weird tr/td vertical alignment problem I had. Thanks for this answer.
    – Ralph Tee
    Jun 16, 2017 at 14:14
  • 4
    This is nitpicking, but <!DOCTYPE html> fixed the problem for me. Feb 20, 2018 at 2:29
  • 13
    I had <!DOCTYPE html> enabled but still had to normalise.
    – antikbd
    Nov 6, 2018 at 14:06
  • 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. Nov 7, 2019 at 6:38
134

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

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.) 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. 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. Nov 9, 2021 at 22:41
53

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

<!DOCTYPE html>
<html>...
1
  • 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? Aug 17, 2015 at 9:25
45

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.

0
35

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.

15

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

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.

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.

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.

3
  • Shouldn't this be a comment instead of an answer? Apr 26, 2020 at 14:43
  • 1
    @PeterMortensen yes, but I can't leave comments - not enough reputation. Apr 29, 2020 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, 2021 at 18:55
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.

0

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

-1
  • 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

1
  • 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 at 15:42
-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">
1
  • 4
    Please edit to explain how this works and why it helps.
    – Yunnosch
    Jan 16, 2020 at 18:26
-7

Put the following code in your CSS file:

table {
    font-size: inherit;
}
1
  • 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 8, 2016 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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