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.
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.
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).
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
CSS body author style doesn't apply, can't override user agent stylesheet
This is very strange. I copied, opened, closed the file like ten times. Then deleted (not commented) out the html selector and just rewrote it again. This fixed the issue. I have never seen anything like this before.
Related Topics
Submit Input Doesn't Get The: Active State in Ie8 When I Click on The Button's Text
Background Size Cover Ie11 Not Covering Full Area
Vertical and Horizontal Alignment of Text with CSS
How to Make a Series of <P> Elements Display Horizontally
How to Fix Safari Mix-Blend-Mode: Color-Dodge Bug
Add Cell Borders in an R Datatable
Use CSS Selectors Like: First-Child Inside Shadow Dom
How to Give Cross Browser Transparency to Element's Background Only
Vertically Aligning an Image to The Bottom Inside a Bootstrap "Column"
CSS: Table and Table-Cell Replacement for Ie7
CSS - Background Images Not Displaying Properly on Mobile Browsers
CSS Backdrop-Filter Does Not Update When Content Behind It Moves
Internet Explorer 11 Wobbly CSS3 Animation
Two Vertical Divs Within a 100% Height Div