I like what twitter has done with bootstrap css, except for their resetting the fieldset and legend tags.
Q: Short of cutting those definitions out of bootstrap.css, is there a way to tell the browser to ignore those commands?
The reason why I don't want to change bootstrap.css is in case they update it some time in the future, I might not remember to go back in and say "Everything is good except for these 2 definitions".
Just redefine it to what you want below the bootstrap.css definitions. Later css always overrides early css (assuming the !important flag is not set on the earlier).
So:
legend {color: red;} /*pretend this is bootstrap's definition*/
legend {color: green;}
will produce green text.
NOTE: you do need to be aware of css specificity. Class and ID's and other such css can make the definition more specific, so to override it, later css must have equal or greater specificity.
.box legend {color: red;} /*pretend this is bootstrap's definition*/
legend {color: green;}
Would produce red text if the legend is in a box classed element because of the higher specificity of the .box class. You would need to at least match that specificity:
.box legend {color: green;}
Related
There are two import urls being called
#import url(SiteA.css);
#import url(SiteB.css);
SiteA.css has
div {border-color: blue;}
SiteB.css has has
div {border-color: red;}
what would the border color would it be blue or red , which wins SiteA.css or SiteB.css
The last called styling will overwrite all the above. CSS will run from top to bottom. This means that the styling on the bottom will overwrite the styling above, unless you use !important. So to answer your question, the border will be red.
If you don't now how !important works you can read the following article:
https://css-tricks.com/when-using-important-is-the-right-choice/
HTML will read and execute the code going from top to bottom. Because importance or specificity isn't defined in your CSS, the stylesheet that gets called lower in the file overwrites the stylesheet above it.
So in this case, the second stylesheet will overwrite the first and the border will be red.
Definitely SiteB.css wins as it comes after the other one, CSS rules are overwritten by order (unless you use !important or use more specific selectors).
Thanks all , I read this post now I understand the last wins
http://www.blooberry.com/indexdot/css/topics/cascade.htm
Why does jQueryUI define extra selectors in their CSS?
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
The first selector is "Find any element having class ui-state-highlight"
The second means "Find any element having class ui-state-highlight and is child of ui-widget-content"
The third is similar to the second.
The last two seem redundant to me, why are there these extra CSS selectors? Did I miss something?
You missed the concept of CSS selector specificity. The two extra selectors with parent class specifications have a higher priority in those contexts, even if a later CSS selector tries to specify a different value for the same properties.
This is especially important in a framework like jQueryUI which is aimed at reuse and flexibility.
For the example you posted, anyone could give .ui-state-highlight a different border colour:
.ui-state-highlight { border-color: red }
But this won’t actually affect any elements with that class and a parent container with the ui-widget-content or ui-widget-header classes, because the more specific CSS sselectors apply to those instead.
Or you can use a different colour to highlight elements in a widget header:
.ui-widget-header .ui-state-highlight { border-color: green }
jQueryUI uses a small number of well-defined consistent classes like these together with selectively to make it easy to understand the different concepts (like highlighting) while at the same time making it possible to use different effects in different contexts (highlighting in a header or the widget content are separate things).
I'm seeing this "div#container" syntax being used in CSS and I'm wondering how it works. Anybody has a resource for it?
As well as being a unique reference as mentioned above, IDs increase specificity (I highly recommend you read this article or one similar http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, understanding specificity in css will make your life easier).
Ill try to explain with a short example - take the following:
div#item { background: blue}
<div id="item" class="item">Hello world</div>
This says make any divs with the ID 'container' blue, but if you then add the following styles after it in your stylesheet
#item {background: purple}
.item {background: green}
the assumption is that the container would be green because stylesheets are cascading and the class with green background comes last. However this isn't the case, an ID has greater precedence and will override a class even if the class comes later. Additionally the item would not be purple because you have added the div before the id earlier on. Having the div and the id increases the specificity further.
People often specify items in css like this: div#container to add extra importance to the style or to specifically state that only DIVS with the id container can be blue.
I would recommend not doing this it becomes harder to override and the style then be comes unusable if you want to make something else have the background blue. So for example the following would not make the paragraph blue because the style specifically states divs.
div#item {background: blue;}
<p id="item">Hello world</p>
If you wanted to override the div#item to be pink instead of blue you might have to do something like the following.
div#item.item {background: pink}
This doesn't seem that bad but when you start building complex websites this can make your css really clunky.
My advice is to make your css as re-usable as possible e.g. the following can be easily overwritten and reused on any tag.
.item { background: blue;}
Hope that helps! Seriously read up on css specificity, it will really help you out.
From the CSS standard itself, a chart of selector syntaxes.
The one you're looking for is near the end:
E#myid Matches any E element with ID equal to "myid".
In other words, that selector will match <div id="container">.
Of course, id values must be unique, so you shouldn't need to specify an element name. You could use *#container or just #container, and many people do. Putting the element name in explicitly might be considered more self-documenting.
http://www.w3schools.com/css/css_selectors.asp
Try to look at this . This will teach you, how this works.
#abc {
text-align: center;
color: blue; }
now anywhere you use #abc text will be aligned center and text color will be blue.
You can also customize it as per your needs.
I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
I am updating someones site. Their markup selecting <a> tags is like this:
#wrapper a{color: red;}
Which is fine. But if I create a <div> within wrapper and give it the <a> tags my own styling eg:
.mydiv a{color: white;}
It simply doesnt work - the color:white in my <div> gets overwritten by the color:red in wrapper, even though the .mydiv css is located below the #wrapper css on my external style sheet. Whats more every other styling - background-color, border, etc - works fine!
This is called specificity.
The selector with the id attribute is more specific than the selector with the class attribute (the former points to a single element but the latter points to multiple elements), so the selector with the id takes precedence over yours regardless of the order.
Your selector needs to be more specific in order to override the other selector:
#wrapper .mydiv a{color: white;}
The reason your CSS rule is being overwritten is because the priority of style rules depends largely on the specificity at which they're defined.
.myClass a is less specific than #myID a, as class selection implies a broader range of elements to be affected by the rule than does ID. To ensure that your rule takes precedence over the old one, simply use #wrapper .mydiv a as your selector, thereby enhancing the specificity of your rule to surpass that of the old one.