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.
Related
I have a CSS stylesheet that contains a lot of declarations starting with html.some-class. Now I'm wondering if there would be any difference if I wrote :root.some-class.
I suppose that the browser may scan the whole DOM to try to apply the html.some-class rule, because there might be an invalid document with more than one <html> tag. On the other hand, in a valid HTML document (and I can be sure that the styled document is standard-compliant) there is only one root element, so that the :root search doesn't have to traverse the whole tree.
Taking the above into consideration, would my stylesheet be more efficiently applied if I used :root instead of html?
Footnote: I'm not able to get rid of the selector targeting the <html> tag.
According to the specs, the precedence of declaration origins is as follows (Top wins):
Transition declarations [css-transitions-1]
Important user agent declarations
Important user declarations
Important author declarations
Animation declarations [css-animations-1]
Normal author declarations
Normal user declarations
Normal user agent declarations
I'm trying to verify that the normal author declaration (6) wins over the normal user declaration (7), but I think I get the opposite result:
In the above example, I have an external css file (style.css) that declares the color of the p element as green.
Then I add some user style, declaring the color of the same selector as blue.
I expect that the author declaration (green) will win over the user declaration (blue), but the opposite happens.
Any ideas of what is going on? Maybe I'm doing something wrong in the example?
A custom CSS applied from the dev tools is not treated as user style sheet, but as an inline, author one. That's why it beats the external CSS declaration.
afaik support for user style sheets was removed from Chrome back in 2014, and the only way to set them is through extensions. For Firefox, you can edit userContent.css
Add "!important" in stylesheet on color. See Below
p{
color: green !important;
}
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external style sheet, I'm using .c-headline-1 and in an internal style sheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal style sheets had higher specificity than external style sheets or no?
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
Inline style (inside an HTML element)
External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
Inline styling
Internal stylesheets (style withing head element)
External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
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.
I'm curious what the difference is b/w E#myid vs. #myid (E is any element) given that there can only be one element with #myid on a page?
It must be a bug/mistake of you that #myid has no effect on the input element. It works fine for me.
As you changed your question:
Image you have two different documents that both use the same stylesheet. In one document a DIV element has the ID “foo” and in the other document a SPAN element has the same ID. You can then use the following stylesheet to style both element different:
#foo {
color: #FFF;
}
div#foo {
background-color: #F00;
}
span#foo {
background-color: #0F0;
}
Both elements would then have the same font color but a different background color.
They have different specificity.
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
The two selectors have different specificity. Rules given in a more specific selector will override rules given in a less specific one.
The specificity rules are really easy. Whenever there is a conflict (two or more rules setting different values on the same element), the following rules are consulted in order:
1) What 'space' does the rule live in? A rule in a higher 'space' automatically wins against rules in lower spaces:
a) Set by the user's stylesheet, with !important
b) Set by the author's stylesheet, with !important
c) Set by the browser's stylesheet, with !important
d) Set in a style="" rule
e) Set by the user's stylesheet, without !important
f) Set by the author's stylesheet, without !important
g) Set by the browser's stylesheet, without !important
2) How many #ids are in the selector? Selectors with more #ids automatically win against selectors with less (assuming they tied in rule #1).
3) How many .classes or :pseudoclasses are in the selector? Selectors with more .classes automatically win against selectors with less (assuming they tied in the previous rules).
4) How many plain elements are in the selector? Again, more is better.
5) Finally, how far down in the document is the rule? Later rules override earlier rules, if they are tied on all previous categories. This applies within a document (at the bottom of your CSS file vs at the top) and between documents (any rules in the second <link>ed css file are 'later' than the rules in your first <link>ed css file).
Understanding specificity can help you write simpler CSS. I almost always start my selectors with the closest #id that I can, because it simultaneously limits the spread of the selector to exactly the elements that I want, and automatically overrides any 'global' css rules I may have set in the document.
The difference is that in different pages you could have different elements using that ID. Why you would do that, is beyond me, but it could be needed for (just an example) a div on some pages taking the same attributes as a span on other pages.
Different browsers will give you different and strange results on non specified corner cases. Some browsers allow for multiple elements sharing the same id, others don't. It even changes with different versions of the same browser. Without knowing wich browser you are using, it's harder to replicate the bug, but I recommend you to test your css on several browsers.
Along with the other folks points about ID not necesarily being unique on a page...
It is possible to have one ID applied to either of N different elements (eg <UL Id=MyList> or <OL Id=MyList>). Then you could have different bits of javascript to handle the various elements (ie. a bit of code to handle UL, a different bit of code to handle OL).
Not saying whether or not that's would be a good design... just saying that it's possible.
Edit: what I mean is that the server side could generate a page with either an <OL> or a >UL>... not both at one time. Think dynamic web page. And again... I'm not saying one way or another if this is a good design... just that it IS POSSIBLE.