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.
Related
What is the point to define global CSS custom properties in a :root instead of body or html tags. Is this will lead to different effects or perfomance issues?
Well, it might be weird in the first place, but it is nothing about it except specificity. :root is actually html itself with a higher specificity, so the main reason for putting variables in :root element is because we are not only using them in CSS but we are using them in SVG and XML also. So we may call :root global scope as its usage. You can also read more about their actual difference here.
It lets you to define various variables and use them if needed. _root stands for html element - have you ever attached style for hrml tag?
Performance - wouldn't bother...
I'm setting up an image cluster for a webpage (similar to sprite-map) for performance reasons. I have a utility that generates the master image, and css to reference the image map.
For simplicity sake, I'd rather include the new css after the regular css file, instead of writing a script to search and replace all the classes in the original css. Something like so in the html (psuedo code):
<LINK href="normal.css" rel="stylesheet" type="text/css">
if(%=usingImageCluster=%)
<LINK href="master.css" rel="stylesheet" type="text/css">
So all the styles that are defined in normal.css would get overridden by the new styles in master.css.
Couple of questions:
Besides the "duplication" of information, does this override cause performance issues?
Will the browser still pull the non-clustered images, because the original CSS file is still included (negating the positive performance gains of image clustering)?
Is there a guarantee that the last loaded style will always be the one applied?
Besides the "duplication" of information, does this override cause performance issues?
Yes, you are generating a new HTTP request for the second external stylesheet. Too many HTTP requests is the #1 slowdown factor for most webpages.
Will the browser still pull the non-clustered images, because the original CSS file is still included (negating the positive performance gains of image clustering)?
Yes, the browser will pull ALL images from the first and second CSS file. Performance time will increase almost linearly (approximate). Especially if you are rewriting every css selector, or changing lots of images.
Is there a guarantee that the last loaded style will always be the one applied?
Yes. Unless the first sheet uses !important on certain style attributes, the last declared styles for a selector will always be applied. This is where Cascading Style Sheets get their name.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.
Suppose I have two files containing styles, a.css and b.css. I import them into my page in the <head> section. Both of these external files define a style for the class .someclass. Which one takes precedence? Is there any guarantee based on the order of the imports for css files that will state which style should be used?
They are cascading style sheets. Later definitions with the same specificity override earlier ones. More specific definitions take precedence over less specific definitions.
You can find exactly how the standard defines it (for CSS2) at http://www.w3.org/TR/CSS21/cascade.html.
Is it possible to find in DOM Inspector what tag/class/id combination triggered a particular Computed style rule.
In my particular case I have a font that changes its appearance if a wrap the fragment in some other tag combination. So I see the different computed Style font-size(s), but can not quickly understand the difference in the contexts.
Maybe some other extension?
You'll want to look at the user agent CSS (check this in the Firebug "style" tab) instead of the computed styles. The user agent CSS is presented in order of inheritance, allowing you to scroll down the list to see which styles were overridden and by which other styles.