I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
width: 180px;
border: 1px solid #aaa;
}
This CSS referred in header of the page. Later in page I define following:
<style>
.shortField {
width: 50px;
}
</style>
I assign class "shortField" to my input box but size is not applied. F12 screenshot:
The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
width: 50px;
}
An alternative would be:
body .shortField {
width: 50px;
}
Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
margin-left: 0 !important;
}
Try to use the lowest specificty selectors that you possibly can.
You need to learn about specificity...
The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific
And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField { /* This is more specific than simple element selector */
/* Styles */
}
It is because the styles in your main.css file are more specific than in your html head.
If you really need to override it try doing this:
.shortfield {width: 50px !important;}
Might help you to understand the hierarchy of importance for CSS.
Inline > Embedded > External
Inline styles are anything within style="" and override any styles specified from embedded, or external stylesheets.
Embedded styles are styles within <style> within the <head> of the document. They are overridden by inline, but override external.
External styles are written in external files, and are overridden by either embedded or inline.
My theory is that you have styles overriding your external stylesheet.
Related
I have bootstrap.css and login.css attached to index.php. Within index.php there are several form elements such as input type['text']. However, both attached CSS files target input type['text']. I have bootstrap.css linked above my other css file:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
How can I specify that I want input type['text'] to use the rules specified within login.css rather that using the rules from bootstrap.css? I generally require bootstrap.css more, but do with to now and then, implement my own rules which I cannot since the rules from bootstrap.css are rendered first since it is listed first.
The more specific you define your css, the more priority it gets in CSS.
You need to define your custom rules more relevant than the bootstrap ones.
Example:
p.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
You see that p.test is stronger than .test though .test comes after p.test.
hope that helped.
if your remove the p from p.div you will see the color gets blue, because the order is only relevant if both rules are equal in specificty.
.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
well, there is something like "CSS Rule Hirarchie" in you can use for your disired effekt. In short: The most "upper" CSS Rule wins the Game.
If you Develop with Chrome or FF you can Debug anything with the Developer Tools (i love the chrome one in this case) and look why it's getting overwritten by Bootstrap. Mostly it's a CSS Level Rule or somthing like this.
I would suggest you using your own Class on the Wrapper Element and override the styles as you wish. Give a look on my Example below to get an Idea how I mean it.
Sidenote: I think this Tutorial from CSS-Tricks describes well whats going on with the Rules of CSS and how the most specific rule comes in to the game.
/* Just a Basic Styling */
ul { list-style:none; }
a { text-decoration: none; font-family: Verdana; color:black; }
/* Lets make all list elements Blue. This should be familiar for you,
* this is the standard overwriting of css classes (is this called so?).
*/
.list li a { color: blue; }
/* Look at this Example now, we specify the 3rd list Element.
* As this rule is more specified as the rule from line 9,
* this rule takes effect on the 3rd line, the other ones will stay blue.
* +
* As a proof that you can't "override" this rule, I have put one
* line below to show you, that even another low lvl rule can't override it.
* Line 20 is still more specified then Line 21, even it is comes after it.
*/
.list li:nth-child(3) a { color:pink; }
.list li a { color:blue; }
/* Another Example of higher CSS Hirarchie would be this line.
* We go one DOM Element even higher, and guess what:
* If you comment out this line here, it will take effect.
*/
/* .wrapper li:nth-child(3) a { color:seagreen; } */
<div class='wrapper'>
<ul class='list'>
<li><a href='#'> Magic Link </a></li>
<li><a href='#'> Another Link </a></li>
<li><a href='#'> Rule over the wrapper Link </a></li>
</ul>
</div>
On the following page is body text, including some bullet text. I need the bullet text to be the same (larger) size as the body text.
http://www.a-quick-sale.co.uk/howitworks/
There is a global stylesheet in the site (/global.css) and I added an entry to it:
li { font-size: 14px;}
But that font-size style is not being applied. I don't want to start being lazy and applying styles directly to page context, but why is the global style I created not being applied?
I've not done any work with CSS or HTML for over a decade, so please be gentle - the answer is likely obvious to anyone with current skills.
Because div#content li is more specific than just a single type selector, you need to include elements that are higher up in the cascade to override the specifcity
Specificity can be thought of as four numbers (0,0,0,0)
Inline styles are the first - highest precedence
ID selectors are the second number
Pseudo-classes and attribute selectors are the third
Type selectors are the fourth
The universal selector * has a specificity of 0, anything will override it.
So just specifying li has a value of (0,0,0,1) vs div#content li which has a specificity of (0,1,0,1) the latter wins. Just use this concept to come up with a higher selector.
In the global.css file there is a more specific selector div#content li that has font-size selected inside of it. Be as specific with your selector, or more specific for it to apply throughout the content area.
In the same global.css, there is a div#content li { font-size: 12px;} which is applied, because it is more specific.
Try forcing the style, like this:
li { font-size: 14px !important ;}
So it gets priority over existent styles for that element.
If you use Chrome Developer Tools (F12) you can see which styles are being applied to each element, and even see styles being overridden as they are crossed out, very helpful for debugging CSS issues like this.
Because in the same file, at line 208 you define div#content li {font-size: 12px;} which is more accurate than just li.
I should say you need to apply styling to links itself, while it's not just a plain text inside li.
li a { font-size: 14px;}
On 108 line of your global.css you have a CSS rule div#content li { font-size: 12px;} that overrides your: li { font-size: 14px;} rule.
This question already has answers here:
How to override !important?
(12 answers)
Closed 2 years ago.
What I am trying is setting this CSS on element:
background: red !important;
But when I try to do this:
background: yellow;
it still only shows the red and not the yellow for that one field as I would like it to be (I am not using external CSS).
What I am asking is how to override it, is it possible?
Ans is YES !important can be overridden but you can not override !important by a normal declaration. It has to be higher specificity than all other declarations.
However it can be overridden with a higher specificity !important declaration.
This code snippet in Firefox's parser will explain how it works:
if (HasImportantBit(aPropID)) {
// When parsing a declaration block, an !important declaration
// is not overwritten by an ordinary declaration of the same
// property later in the block. However, CSSOM manipulations
// come through here too, and in that case we do want to
// overwrite the property.
if (!aOverrideImportant) {
aFromBlock.ClearLonghandProperty(aPropID);
return PR_FALSE;
}
changed = PR_TRUE;
ClearImportantBit(aPropID);
}
Good read
Specifics on CSS Specificity
CSS Specificity: Things You Should Know
Here's an example to show how to override CSS
HTML
<div id="hola" class="hola"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{ background-color:red !important; }
#hola{ background-color:pink !important;}
and output will be
Also we can not override inline !important
HTML
<div id="demo" class="demo" style="background-color:yellow !important;"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{ background-color:red !important; }
#demo{ background-color:pink !important;}
the output is
As described in w3 spec, !important declarations do not alter the specificity, but rather take precedence over "normal" declarations. Effectively, such declarations only "compete" between themselves - thus, you can override yours with another !important declaration of higher specificity:
/*
these below are all higher-specificity selectors and, if both
rules are applicable to the same element, background colour
will be set to "yellow":
*/
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}
There is also the declaration order to consider - a declaration further down in the CSS will take precedence over an earlier one if their selectors have the same specificity.
A case worth noting is when it clashes with an inline declaration. Counterintuitively (but fully in line with the spec), the !important value will come out on top! This means that if you have
<style>
#secret-container {display:none !important;}
</style>
<script>
$('#secret-container').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>
the div in question will remain hidden! The only way to have an inline rule take precedence over an !important one is, well, by applying !important to it as well. I'll let you be the judge of how good a practice that is ಠ_ಠ
There's no overriding inline !important though.
!important will override background: yellow; Try to avoid using !important. Take a look at css specificity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
I want to know the order of loading the CSS files in a HTML page.
My actual requirement is like this: I have more than 10 CSS files in my application.
I am importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files.
In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.
Can anyone know which one will take higher priority or which one loads first ?
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
Read all about it # http://www.w3.org/TR/CSS2/cascade.html
CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
So
div.sample { background: none; width: 200px }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 400px }
You can also use the '!important' addin to make rules take precedence over other defined rules.
So
div.sample { background: none; width: 200px !important }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 200px !important }
Note: Many people will advise against using the '!important' addin in your CSS files. Personally, I see nothing wrong with it.
Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important; are an exception. Part of the problem is that you have 10 style-sheets.