I have seen:
CSS 2, precedence of stylesheets imported using link element
In which order do CSS stylesheets override?
stylesheet - Can one CSS file take priority over another CSS file?
They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:
body {color:aqua;}
And "Red.css" has:
body {color:red;}
Then using the following:
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
The last one, Yellow, is used, as the other answers say. If I change that however to:
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
Then Aqua is used, not the last one, Red. See Precedence of CSS rules Sample 2. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.
Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the first stylesheet is used, not the last, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.
So I have the following two questions:
Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?
If so, then why?
I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.
The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.
Disclaimer: My old answer and line of thinking was completely wrong, so I've deleted it, and am posting this as a replacement so as not to be confused with any of the prior discussion.
When you give a <link> element a title attribute, you are defining it as an alternative style sheet set.
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
^^^^^^^^^^^
The precedence of styles was a red herring. The Red.css styles were never being applied at all, because that style sheet set was not currently active.
Per the spec:
Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.
Also worth reading: "CSS: alternative style sheets":
A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).
How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).
You're supposed to use rel="alternative stylesheet" when defining alternative stylesheets, but this appears to be a case where the browser anticipated the behavior. Remove the title attributes, and the <link> elements return to their standard behavior as defined in the spec.
Related
My jQuery UI calender's css styles are overridden by the bootstrap css styles.
See the following snapshot... the calendar's year text color is not black.
The reason is, bootstrap css are overriding the jQuery css. In browser developer view, if I uncheck the style marked in red, then the style in green arrow gets enabled and everything looks normal.
Question:
How should I fix this issue in the css? Any suggestion is appreciated.
There are various rules governing the order that CSS is processed in. Generally, when two rules apply to the same element, the rule called LAST will supercede the rule called FIRST.
Thus, in your case, I would suggest loading jquery-ui.css after bootstrap.css.
The order in your <head> should be:
<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/jquery-ui.css">
Notes:
Another reason why jquery-ui.css should be place after bootstrap.css is style structure. Bootstrap.css governs the entirety of your document, it is a style and structure framework, while jquery-ui.css is intended to apply only to select elements.
Alternatively, if your aim is to modify the jQuery UI element, I would recommend creating a custom stylesheet (also placed after both documents), as opposed to altering jquery-ui.css or bootstrap-ui.css. However, this is just to maintain a best practice approach.
And as a final (and sloppy) alternative, apply !important to the style you wish to use to override, like so: color: #fff!important;
Im playing around with the front end of a site using the new bootstrap 3.0 and im fine tuning things by irritating in firebug, but there is something odd that i keep noticing
even though my <head> is layed out like this
<link rel="stylesheet" href="bootstrap.css">
<style>
td {padding:0px;}
<style>
With the external css being declared before the internal (which im only using during development) the external styles are still over riding them.
To get the padding:0px; to work i need to set it as padding:0px !important;
Any ideas why this is.. i thought that the last declared peice of css would always override conflicting previously declared css.
CSS precedence is about !important, origin (user vs browser), specificity and then order. Here is a good explanation.
About to have an exam and I am going through the previous exam that we have been given.
The question:
When two or more style sheet rules apply to the same element, which of the following types of rules will take precedence?
a. Any declaration with browser origin
b. Normal declaration with user origin
c. Normal declaration with author origin
d. Document-level declaration
So would the answer be c or d? I am guessing d because c is a normal declaration and not important but I can't really get a definitive answer anywhere
Cheers
The answer is Document-level declaration, it will be applying styles to the element which are declared in the last linked stylesheet
Test case
HTML
<html>
<head>
<link href="stylesheet1.css" rel="stylesheet" type="text/css" />
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>hello<!-- Color applied will be green --></div>
</body>
</html>
CSS
stylesheet1.css
div {
color: red;
}
stylesheet2.css
div {
color: green;
}
The exam question is incorrect, as exam questions often are. The expression “Document-level declaration” is not a proper term, and it has multiple interpretations. Moreover, it uses the word “normal” without specifying its meaning, but probably you are right in guessing that it means “without !important”.
The answer is “undecided”, since “a” includes a browser style sheet rule with !important, which trumps “b” and “c” (and “d” unless it means something that may have !important), but it would be incorrect to say that “a” generally trumps the others. Edit: The specifications might be read so that browser style sheets cannot have !important or that it does not have an effect in them, but at least Firefox html.css uses !important (obscurely).
My bet is that the author of the exam did not think of the possible of an !important rule in a browser style sheet, and you are therefore supposed to answer “c”.
Edit: Option “d” is there probably just to confuse students, since if it means a style sheet embedded in an HTML document, it’s a special case of author style sheel, and being embedded does not affect the cascade rules (among style sheets embedded with style and linked with link, it is the placement of the HTML element that matters, not the embedded vs. linked thing).
You are reffering the CSS Cascading.
So, from the link
Style sheets may have three different origins: author, user, and user agent.
and the precedence between them is as follows
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, > however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style
sheet.
The cascading order is defined by ascending order of precedence
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
The CSS specificity Rules later come into picture.
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.
I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself.
Sure I could open a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to do that.
Edit: My previous question did not actually reflect what I was looking for. So I changed it to the current one.
Also thanks to all that suggested window.onbeforeprint and window.onafterprint. That was relevant to my edited question.
First, The Ok Way:
Take a look at window.onbeforeprint and window.onafterprint (the original question asked about how to do it programmatically I believe).
Now, the Better Way:
A better way to do this is with a style that is specifically for printing. In other words, your div might look like this:
<div class="someClass noPrint">My Info</div>
You would then have this in your stylesheet:
.someClass {font-family:arial;}
#media print {
.noPrint { display: none; }
}
Another Option
You could also put this in a separate stylesheet if you wanted so you don't have to mix styles:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Your screen stylesheet could have ".someClass" defined one way and then your print stylesheet could have it defined a completely different way.
IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.
<link rel="stylesheet" type="text/css" media="print" href="print.css">
See also: this answer
You may want to consider creating a style sheet specifically for printing using media="print"
You should really implement this as CSS media=print styles. The media attribute of link element can be used to select to which media a stylesheet is applied. Check this article