What is a user agent stylesheet?
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.
How to stop user agent stylesheets from overriding my css
The "problem" here is that there is actually no input
style in the author stylesheet (see the spec for more info), and therefore the style that is defined in the user agent stylesheet is used.
The (relevant) user agent rule (on chrome) is:
input, input[type="password"], input[type="search"] {
cursor: auto;
}
You can achieve what you want in a couple ways:
- Create a css class that selects the input directly, for example
- using another css class, or
- selecting the input within the already-defined class,
- etc
- Explicitly setting inheritance behavior for the cursor style on all inputs
For (1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
For (2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
Override User Agent Stylesheet CSS in Chrome Browser
Add ul { list-style-type: none; }
in your CSS to override the default style applied by the browser (from the user agent stylesheet) and remove the li
bullet points
Why is the user agent stylesheet overriding my html{} style?
Nope. If you want your styles to have precedence, they need to apply to the same element. Which, in our case, is input
.
You have applied styles to the html
element, not to input
.
Now, if you changed your selector to html *
, to html input
, to input
or to *
, it would be a different story... The two selectors would get compared and yours would have precedence.
The only difference between your selectors and the ones in the default browser stylesheet is yours are loading later, hence, provided you have the same specificity, yours apply. So the minimum selector for yours to apply would be input {}
.
But the important bit here is: html {}
only styles inheritable input
properties which are not defined (not set) at element level. If they are set inheritance does not happen (there's no need to inherit, because the property resolves). The input
set value applies, regardless of values and specificity on any of the parents. In fact, if what you're expecting would happen, designing web would be a lot more difficult and a lot less flexible (IMHO).
Which is a reaaaaaly long way of saying: change
html {/* globals here*/}
into:
* {/* globals here */}
... and they'll probably work as intended. But be warned: it will apply to all elements, and you will soon understand why the way inheritance works is, in fact, quite smart (and helpful).
user agent stylesheet override my own styles
The answer to the general question is that only property settings set on an element itself are taken into account when deciding which style setting “wins”. For example, if we have just one style sheet that sets font-size: 18px
on the body
element and another style sheet that set font-size: 9px
on all p
elements, then the font size of p
elements is 9px, no matter what the origins of the style sheets are, e.g. whether the latter is just a browser default style sheet. Inheritance plays no role here. This is all described in section Assigning property values, Cascading, and Inheritance of the CSS 2.1 spec.
Inheritance is considered only after the above “fight” has been resolved. Only then are inheritable properties inherited by elements that have them not set at all.
The specific question does not provide specific code, but it can be inferred that you have something like this:
<style>
body { font-size: 12px; }
</style>
<table>
<tr><td>foo
</table>
bar
Normally this causes both “foo” and “bar” to appear in 12px size. The table cell inherits the size from the table row, which inherits it from the tbody
element, which inherits it from the table, which inherits it from the body
.
However, in your case, this chain is broken. The reason is that the browser style sheet has
table { font-size: medium }
which in practice tends to mean 16px. Now the table
element has the property set, so the cell inherits that value.
Browsers do not normally have such a rule in their style sheets. However, in Quirks Mode, most browsers apply the rule. This means that font size is not inherited from body
into tables. This reflects bugs (or oddities) in very old versions of IE and lets legacy page be rendered as they used to be.
If you have unintentionally caused Quirks Mode and do not need it for other purposes, just slap
<!DOCTYPE html>
at the very start of your document. But beware that old pages may get messed up in different ways, if they have been designed in testing conditions that correspond to Quirks Mode.
Alternatively, add the following rule into your style sheet:
table { font-size: 100% }
This means that a table gets the font size of its parent. (Like in inheritance, but safer.)
Google Chrome user agent stylesheet
You seem to be imagining that a rule overrides/replaces/shadows all properties for its selector(s). That, of course, is not the case. A rule such as
html,body,div,ul,ol,li,p,h1,h2,h3,h4{
margin:0;
padding:0;
}
specifies only the margin
and padding
properties for the specified selectors. Other properties for those selectors, including display
etc., will continue to be drawn from wherever they might have been specified, including the user agent default stylesheet.
Note that -webkit-margin-*
properties are the way Chrome sets up its defaults to be more general in the case of right-to-left layouts. However, they are separate from the margin
properties, and hence will not be shown as being overridden (struck-out) because a higher-priority rule specifies a margin
. However, when Chrome goes to calculate the margin, it will give precedence to the margin
property over the -webkit-margin-*
properties.
Why is the user agent style sheet the last one style sheet to be applied?
@GoldShip, the answer is here:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
Quote from above link:
6.4.1 Cascading order
To find the value for an element/property combination, user agents must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
- user agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- user important declarations
- Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
- Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Related Topics
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Why Does Height 100% Work When Doctype Is Removed
How to Style Html5 Range Input to Have Different Color Before and After Slider
Advantages of Using Display:Inline-Block VS Float:Left in Css
Margin-Top Not Working For Span Element
How to Make an Svg Scale With Its Parent Container
How to Prevent Long Words from Breaking My Div
How to Center ≪Ul≫ ≪Li≫ into a Div
Is Float For Layout Bad? What Should Be Used in Its Place
Show Child Div Within Hidden Parent Div
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Is There a CSS Parent Selector
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector