My website has a stylesheet defined in the header as style.css with a selector:
.myClass {background:#000;}
Now my div looks like:
<div class="myClass" style="background:#fff;"> </div>
Which one has priority, the inline or the class?
The order of precedence with CSS is as follows:
!important (this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
Inline, such as <p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if the redText class declaration has already tried to define the property of color:. Other properties can still be honored though.
Internal styles - those written inside the <head><style> section of an html page.
External stylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the <head> section is: <link rel="stylesheet" type="text/css" href="mystyle.css" />
Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
Browser default
Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
Inline style (inside an HTML element)
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
The order of precedence with CSS is as follows:
Inline, such as <div id="orange" class="green" style="color: red;">This is red</div>.In this example, the class is ignored if the green class declaration has already tried to define the property of color.Also id is also ignored if it has tried to define the color.
Id Selector , such as #orange { color: orange; }
Class Selectors , such as .green { color: green; }
Element Selectors ,such as div { color: black; }
Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says
When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.
The text color of the below will therefore be red.
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>
Please Consult MDN for any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.
There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence.
Eg.
<style></style>
<link> </link> <!-- Precedence -->
<link> </link>
<style></style> <!-- Precedence -->
Related
In an HTML header, I've got this:
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
styles.css is my page-specific sheet. master.css is a sheet I use on each of my projects to override browser defaults. Which of these stylesheets takes priority?
Example: first sheet contains specific
body { margin:10px; }
And associated borders, but the second contains my resets of
html, body:not(input="button") {
margin: 0px;
padding: 0px;
border: 0px;
}
In essence, does the cascading element of CSS work the same in terms of stylesheet references as it does in typical CSS functions? Meaning that the last line is the one displayed?
The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.
The most specific style is applied:
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
If all of the selectors have the same specificity, then the most recent decleration is used:
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
In your case, body:not([input="button"]) is more specific so its styles are used.
Order does matter. The last declared value of multiple occurrence will be taken. Please see the same one I worked out: http://jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>
If you interchange the order of .test{}, then you can see the HTML takes value of the last one declared in CSS
The last loading CSS is THE MASTER, which will override all css with same css settings
Example:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
reset.css
h1 {
font-size: 20px;
}
master.css
h1 {
font-size: 30px;
}
The output for the h1 tag will be font-size: 30px;
Lets try to simplify the cascading rule with an example. The rules goes more specific to general.
Applies rule of the ID's one first (over class and/or elements
regardless of the order)
Applies classes over elements regardless of order
If no class or id, applies the generic ones
Applies the last style in the order (declaration order based on file load order) for the same group/level.
Here is the css and html code;
<style>
h2{
color:darkblue;
}
#important{
color:darkgreen;
}
.headline {
color:red;
}
article {
color:black;
font-style:italic;
}
aside h2 {
font-style:italic;
color:darkorange;
}
article h2 {
font-style: normal;
color: purple;
}
</style>
Here is the css style
<body>
<section>
<div>
<h2>Houston Chronicle News</h2>
<article>
<h2 class="headline" id="important">Latest Developments in your city</h2>
<aside>
<h2>Houston Local Advertisement Section</h2>
</aside>
</article>
</div>
<p>Next section</p>
</section>
Here is the result. No matter the order of style files or the style declaration, id="important" applies at the end (note the class="deadline" declared last but does not take any effect).
The <article> element contains <aside> element, however last declared style will take effect, in this case article h2 { .. } on third h2 element.
Here is the result on IE11: (Not enough rights to post image)DarkBlue: Houston Chronicle News, DarkGreen: Latest Developments in your city, Purple: Houston Local Advertisement Section, Black: Next section
It depends on both load order and the specificity of the actual rules applied to each style. Given the context of your question you want to load your general reset first, then the page specific. Then if youre still not seeing the intended effect you need to look into the specificity of the selectors involved as others have already pointed out.
The best way is to use classes as much as possible. Avoid ID selectors (#) anyway. When you write selectors with just single classes, the CSS inheritance is way more easy follow.
Update: Read more about CSS specificity in this article: https://css-tricks.com/specifics-on-css-specificity/
I suspect from your question that you have duplicate selections, a master set, that goes for all pages, and a more specific set that you wish to override the master values for each individual page. If that is the case, then your order is correct. The Master is loaded first and the rules in subsequent file will take precedence (if they are identical or have the same weight). There is a highly recommended description of all rules at this website http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ When I started with front end development, this page cleared up so many questions.
It is the cascade that defines the precedence of declarations. I can recommend the official specification; this part of it is well-readable.
https://www.w3.org/TR/css-cascade-3/#cascading
The following have an effect on the sorting, in descending order of priority.
A combination of origin, and importance:
Transition declarations
User agent’s declarations marked with !important
User’s declarations marked with !important
Page author’s declarations marked with !important
Definitions on the element with style attribute
Document-wide definitions
Animation declarations
Page author’s declarations
Definitions on the element with style attribute
Document-wide definitions
User’s declarations
User agent’s declarations
If two declarations have the same origin and importance, the specifity, meaning how clearly the element is defined, comes into play, calculating a scoring.
100 points for every identifier (#x34y)
10 points for every class (.level)
1 point for every element type (li)
1 point for every pseudo-element (:hover) excluding :not
For example, the selector main li + .red.red:not(:active) p > * has a specifity of 24.
The order of appearance only plays a role if two definitions have the same origin, importance and specificity. Later definitions precede earlier definitions in the document (including imports).
EDIT: Apr 2020, according to #LeeC's comment, this is not longer the case
Yes, it works the same as if they were in one sheet, however:
Load Order Matters!
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
In the above code, there is no guarantee that master.css will load after styles.css. Therefore, if master.css is loaded quickly, and styles.css takes a while, styles.css will become the second stylesheet, and any rules of the same specificity from master.css will be overwritten.
Best to put all your rules into one sheet (and minify) before deploying.
I believe when executing the code, it is read top to bottom, meaning the last CSS link would be override similar styles in any style sheets above it.
For example, if you created two style sheets
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
and in both of these, you set the body background-color to two different colors - the color of the body in style2.css would take priority.
You could avoid the styling priority issue by using !IMPORTANT inside the class style you would like to take priority, or possibly re-arranging your <link> order.
I know that if we use internal css and external css at the same time (on the same selector) then the internal style should take higher priority and overwrites the external style. However, I ran into a problem here and couldn't figure out why.
I have following style definition in the head element:
<link rel="stylesheet" href="styles.css">
<style type="text/css">
h2 {font-family: verdana; color: red;}
</style>enter code here
In styles.css I have
h2 {color: blue;}
Then the styles work as they should -- the h2 element is in red.
But if I put the link element after the internal styles:
<style type="text/css">
h2 {font-family: verdana; color: red;}
</style>
<link rel="stylesheet" href="styles.css">
then the cascading rule is not working anymore -- the h2 is blue instead of red, which means external style now has higher priority than the internal one.
It doesn't make sense but I couldn't figure out why. Could anyone enlighten me on this? TIA.
The behaviour is correct, cause your "internal style" is not an inline style, it considered at the same level of an external css file.
In your second example:
First your browser read first rule (h2 { color: red} ) and then it overrides that rule with the one inside the style.css
This is the expected behaviour.
But in case in your code you'll write an inline style like:
<h2 style='color: yellow'>This text will be yellow</h2>
then this rule will overrides the first two rules.
"Cascading" means the last rule read will overrides the first.
This is working exactly as intended if you link it this way. The style that comes later will override the earlier style. (If the selectors are EXACTLY the same).
By "internal" you may mean "inline" styles, which do have priority and will override any other styles.
Example:
<h2 style="color: orange">Hello world</h2>
This "inline style rule" will override most other rules, although there are ways to override this as well.
For more information, see this. There is also a very handy reference chart.
I can't seem to find much information about this.
Smashing Magazine seems to be saying that html and :root are the same thing but surely there must be a tiny difference?
One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)
:root {
color: red
}
html {
color: green;
}
<div>hello world</div>
So, in the above example, the :root selector overrides the html selector and the text appears red.
From the W3C wiki:
The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.
CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example.
From the specification (emphasis mine):
This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).
For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.
However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.
Example:
You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.
Another thing to consider is that it's technically possible to replace the root element using javascript:
<html>
<body>
<div id=test>
This will become the root element!
<style>
:root { text-decoration: underline; }
html { color: red; } /* this selector will stop working */
</style>
</div>
<button onclick=document.documentElement.replaceWith(test)>click to replace the root</button>
</body>
</html>
I have a <p:panel> with id X and i want to remove the padding from its content X_content the generated HTML for the panel content is:
<div id="X_content" class="ui-panel-content ui-widget-content"> and the element appears in chrome developer tools to to have a padding:
padding:0.5em 1em;
i made an embedded style sheet to override the one in primefaces as follows:
<h:head>
<style>
.ui-panel-content, .ui-widget-content{
padding:0px;
}
</style>
</h:head>
but i didn't work, the padding still exists, could anyone help me?
Your CSS selector
.ui-panel-content, .ui-widget-content {
...
}
basically means: "Select all elements having ui-panel-content or ui-widget-content class".
However, the padding is definied in PrimeFaces default CSS by this CSS selector
.ui-panel .ui-panel-content {
...
}
which basically means "Select all elements having ui-panel-content class which is a child of an element having ui-panel class" which is according CSS cascade rules a stronger selector. This has thus higher precedence than your CSS selector. This is regardless of the declaration order of your style class (the declaration order only matters when the selectors have an equal strength).
When overriding PrimeFaces default CSS, you should provide a selector of at least the same strength or a stronger one. In your particular case, just use the very same selector if you intend to apply the style globally:
.ui-panel .ui-panel-content {
padding: 0;
}
Please note that when using <style> in <h:head>, then it would still be overridden by PrimeFaces default CSS, because it's auto-included in end of head. Rather move the <style> to <h:body>, or, better, put it in its own CSS file which you include by <h:houtputStylesheet> inside <h:body>.
See also:
How do I override default PrimeFaces CSS with custom styles?
CSS selector syntax
I can't seem to find much information about this.
Smashing Magazine seems to be saying that html and :root are the same thing but surely there must be a tiny difference?
One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)
:root {
color: red
}
html {
color: green;
}
<div>hello world</div>
So, in the above example, the :root selector overrides the html selector and the text appears red.
From the W3C wiki:
The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.
CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example.
From the specification (emphasis mine):
This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).
For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.
However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.
Example:
You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.
Another thing to consider is that it's technically possible to replace the root element using javascript:
<html>
<body>
<div id=test>
This will become the root element!
<style>
:root { text-decoration: underline; }
html { color: red; } /* this selector will stop working */
</style>
</div>
<button onclick=document.documentElement.replaceWith(test)>click to replace the root</button>
</body>
</html>