I have a single-page MVC web app. When a server error occurs, we display the exception in a dialog in the same page. The ASP.NET YSOD adds inline CSS. This changes the fonts for the whole app because of the styles added to the BODY element.
Is there a way to compartmentalize the added CSS to just that dialog? Or have the added CSS styles removed when the dialog is closed? Or edit the styles and error page so the styles are not global?
This is the inline CSS that is added:
<style>
body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}
p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:"Lucida Console";font-size: .9em}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
</style>
there are a couple of ways of overcoming this. First you can always set !important at the end of the style tags.
<style type="text/css">
body {font-family:"Verdana" !important;font-weight:normal !important;font-size: .7em !important;color:black !important;}
</style>
Though I find that cumbersome and annoying. The better route in my opinion, unless it adds css to the actual elements (i.e. <div style="font-size:15px;">Testing</div>), would be to wrap your popup window elements in a wrapper with an ID and then set all of your css based off of the wrapper and it's children. When you set a higher specificity on the code then it will override lower levels.
Consider three code fragments:
A: h1
B: #content h1
C: <div id="content">
<h1 style="color: #fff">Headline</h1>
</div>
The specificity of A is 0,0,0,1 (one element), the specificity of B is 0,1,0,1 (one ID reference point and one element), the specificity value of C is 1,0,0,0, since it is an inline styling.
Since
0001 = 1 < 0101 = 101 < 1000,
the third rule has a greater level of specificity, and therefore will be applied. If the third rule didn’t exist, the second rule would have been applied.
reference http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
overall it will be up to you how you handle it but if you can get a grasp of specificity it is actually much better to use this.
Related
I know that inline has more specificity than external but does internal have more than inline? Or is it the other way around?
Internal:
<style>
p{
color: red;
}
</style>
Inline:
<p style="color:blue">
External:
p{
color:green;
}
No, internal does not take over inline. Inline styles are always the highest priority. From Mozilla Docs:
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
These "external stylesheets" also include style tags in the head or body. See for yourself:
p {
color: red;
}
<style>
p {
color: red;
}
</style>
<p style="color: blue">
Hello!
</p>
<style>
p {
color: red;
}
</style>
Whether it is before or after, the only thing that will override an inline style is !important, which you should shy away from using. Refer to the MDN link above.
Finally, be careful when you say,
I know that Inline has more specificity than external [...]
since specificity is a special CSS concept. Yes, inline styles will override external styles (when not using !important), but don't confuse specificity with precedence. CSS rules are ranked in two ways:
Specificity
and Order.
This includes order across separate files. If you put your style tag before your link tag, then the external styles will overwrite the internal ones (if they are of the same specificity).
Again, this doesn't apply much to internal styles, and this is mostly a semantics clarification for "specificity," but it doesn't hurt to point out.
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 6 years ago.
I am trying to understand specificity in CSS.
My current understanding is that specificity is very similar to inheritance, but in some way more specifically defined.
Mozilla Specificity Definition:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of CSS selectors of different sorts.
The current task is:
Refactor the CSS declarations for .active a and .copyright so that the !important rule can be removed.
CSS:
.main li a {
color: #7ab2c1;
}
.active a {
color: #826c55 !important;
}
.primary p {
font-size: 12px;
}
.copyright {
font-size: 10px !important;
}
And relevant HTML:
<nav class="main">
<ul class="group">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
[...]
<footer class="primary">
<p>Sign up for our newsletter, it's a racket!</p>
<p class="copyright">Copyright © Sven's Snowshoe Emporium. All Rights Reserved.</p>
</footer>
Can anyone guide me through the process of refactoring in such a way that helps me to grasp the fundamental concepts?
A class has a specificity of 10. An element has a specificity of 1.
Therefore, in the first instance:
the .main li a selector has a specificity of 12.
the .active a selector has a specificity of 11
Because they both target the same element, and the former has a higher specificity, the latter loses the battle to style the element.
In the second instance:
the .primary p selector has a specificity of 11.
the .copyright selector has a specificity of 10.
Again, because they both target the same element, and the former has a higher specificity, the latter loses the battle to style the element.
The !important annotation trumps all specificity. Hence, with that applied, .active a and .copyright re-take the elements.
If you want to remove !important, which would be the right thing to do as it's not necessary here, you can instead boost the specificity of the selectors.
An ID has a specificity of 100. So that can quickly move a selector up in priority.
Here are some examples:
.main li a { color: #7ab2c1; } /* previous winner; specificity 12 */
.main .active a { color: #ff0000; } /* added class selector; specificity now 21 */
.primary p { font-size: 12px; } /* previous winner; specificity 11 */
#copyright { font-size: 8px;} /* switched to ID selector; specificity now 100 */
<nav class="main">
<ul class="group">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<footer class="primary">
<p>Sign up for our newsletter, it's a racket!</p>
<p id="copyright">Copyright © Sven's Snowshoe Emporium.
All Rights Reserved.</p>
</footer>
References:
How do I give a CSS class priority over an id?
CSS Specificity
CSS Specificity: Things You Should Know
Relationship between !important and CSS specificity
You can change .copyright to a lot of things, but one of the following two seems the most logical to me:
.primary .copyright
or
p.copyright
What specificity is supposed to do, is look at an how specific your selector is, and deciding whether that rule should be followed.
CSS inside a media-query is more specific than the exact same CSS outside of it
Ids are more specific than classes
html body section p.special.selected:hover is more specific than p
Etc.
There are a whole bunch of rules that give your selector 'points' with every part. The more points, the more specific. After a lot of practice, you can write over-ruling CSS without even thinking about it.
In this example, you're trying to make the selectors that are setting properties that you wish to override less specific. That way, you won't have as far to go to override them.
Let's take a look at
.main li a {
color: #7ab2c1;
}
.active a {
color: #826c55 !important;
}
.main li a is pretty darn specific: it's selecting all anchor tags within an li within an element with main in its className. How could you make that less specific? Based on your markup,
.main a {
color: #7ab2c1;
}
is less specific, is still applicable, and would be overridden by your .active selector as it has the same specificity (a class + an element). nav a or even plain old a would work as selectors, too, depending on how much (or how little) you want that rule to apply.
Now, let's look at the footer.
.primary p {
font-size: 12px;
}
.copyright {
font-size: 10px !important;
}
How can we make that first selector less specific? What about changing it to
p {
font-size: 12px;
}
Your .copyright selector is more specific and would override it (however, all p elements everywhere will have a default font-size of 12px and that may not be what you want).
We could limit that to the footer:
.primary {
font-size: 12px;
}
That would limit the font-size property to just footer elements and would allow you to override it with the subsequent rule.
In general, you're attempting to refactor based on specificity values to make the things you want to override have the smallest specificity values possible. You do this by using the most general selectors that would apply the rules you want without applying those rules to elements that should not have them.
Basically using html tags as a selector adds a small amount of specificity, using a class adds a medium amount of specificity, using an ID adds a large amount of specificity, and using !important trumps all.
The .main li a selector uses 1 class + 2 html tags while .active a only uses 1 class + 1 html tag. The former has more specificity than the latter, but using !important overrides this and forces the latter style to apply.
To remove the need for !important you either need to a) reduce the amount of specificity in .main li a or b) increase the amount of specificity in .active a. I would recommend option a and changing the selector to .main a. This carries the same amount of specificity as .active a, but due to the cascading nature of CSS, the style that appears last will get applied, no !important needed.
Same principle in the 2nd scenario - .primary p has 1 class + 1 html tag, while .copyright only has 1 class. In this case, I'd go with option b and change the selector to .primary .copyright. 2 classes have more specificity than 1 class + 1 html tag and the style will apply without needing !important.
Final CSS:
.main a {
color: #7ab2c1;
}
.active a {
color: #826c55;
}
.primary p {
font-size: 12px;
}
.primary .copyright {
font-size: 10px;
}
I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.
For example if I create
h1 {
font-size:18px;
color:#FFFFFF;
font-family:Arial, Helvetica;margin:0;
padding:0;
}
h2 {
font-size:18px; color:#000000;
font-family:Arial, Helvetica;
font-weight:normal;margin:0;
padding:0;
}
I can repurpose the h selectors with something like
.whatever h1 {
color: #000;
font: 2.0em arial, sans-serif;
background-color: #fff3ea;
margin: 50px 0px 0px 50px;
}
.whatever h2 {
color: #000;
font: 1.7em bold arial, sans-serif;
background-color: #fff3ea;
margin: 25px 0px 25px 75px;
}
If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.
Any thoughts?
This is called specificity.
It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:
HTML
<h1>I'm green with envy</h1>
<h1>And so am I</h1>
<div class="whatever">
<h1>Because I'm rather special</h1>
</div>
CSS
h1{
color: green;
}
.whatever h1{
color: blue;
}
RESULT
The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:
HTML
<h1 class="whatever">I'm special</h1>
CSS
h1.whatever{
color: blue;
}
Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)
How specificity is determined (simple rules to remember)
User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:
Selectors with only the name of the element (e.g. h1) are the least specific of all
Selectors with a .class are more specific than selectors with no class
Selectors with an #id are more specific than selectors with a .class
Selectors lower down in a stylesheet take precedence over earlier identical selectors
Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:
Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.
How specificity is really determined (how to calculate it precisely)
Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.
If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)
You faced overriding the selectors.
example:
<div class="one">
<div id="two">
<h1> This is H1 text </h1>
</div>
</div>
so you have set H1 to FFF - white color by:
h1 {
color:#fff;
}
now we do first override ( using ID ):
div#two h1 {
color:#888;
}
and the third, notice you don't have to put current element, you can set it for each element with given class:
.one div#two h1 {
color:#000;
}
so in the end we have black text color.
The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.
Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces
<html>
<head>
<style type="text/css">
#sidebar p {
font-family: Verdana;
font-size: .9em; }
#sidebar .intro {
font-family: Georgia;
font-size: 1.25em;
color:red;
}
</style>
</head>
<body>
<div id=”sidebar”>
<p class=”intro”>
As you can see, the more CSS styles you create, the greater the potential for formatting
snafus. For example, you may create a class style specifying a particular
font and font size, but when you apply the style to a paragraph, nothing happens!
This kind of problem is usually related to the cascade. Even though you may think
that directly applying a class to a tag should apply the class’s formatting properties,
it may not if there’s a style with greater specificity.
You have a couple of options for dealing with this kind of problem. First, you can
use !important (as described in the box above) to make sure a property always
applies. The !important approach is a bit heavy handed, though, since it’s hard to
predict that you’ll never, ever, want to overrule an !important property someday.
Read on for two other cascade-tweaking solutions.
</p>
</div>
</body>
</html>
the #sidebar p style has a specificity of 101 (100 for the ID, and 1 for the tag
selector), while the .intro style has a specificity of 10 (10 points for a class selector). Since 101 is greater than 10, #sidebar p takes precedence. Changing .intro to #sidebar .intro changes its specificity to 110.
Even though I have change this my result is not coming
Can anyone explain me.
output: should be in red color, font-size-1.25em and font-family -Georgia
The quotes around the ID sidebar and classname intro are invalid.
”sidebar” should be "sidebar".
The browser interprets the ID as ”sidebar” and not sidebar, therefore, none of your rules even match.