When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.
Quick Answer:
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.
BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
Example 1:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
.name { color: blue; }
.name { color: red; }
</style>
The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".
Example 2:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
#container .name { background-color: blue; }
.name { background-color: red; }
</style>
The above example will make the background color blue, even though blue was first because the selector is more "specific".
Exception (the use of !important):
The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.
External CSS:
Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.
How to test:
In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.
Not sure how "specific" something is?
Try some of the many online CSS specificity tools:
https://polypane.app/css-specificity-calculator
https://specificity.keegan.st/
https://www.codecaptain.io/tools/css-specificity-calculator
Related
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'm having some trouble with some CSS. I have a number of unique tables with a similar format name, and I need to set the background color on some of them. However, if I try and use a wildcard the style gets overwritten by a parent CSS file.
The background colour here works fine:
#AllProtectedServers1 td.status.online{
color: green;
background-color: yellow;
font-weight: bold;
}
But the background colour doesn't work here as it's being overwritten higher up (although everything else does):
td.status.online {
color: green;
background-color: yellow;
font-weight: bold;
}
I'm going to have 20+ tables all starting with "AllProtectedServers", so naming them all individually is going to make the css huge. Is there anyway I could use a wildcard? I've tried using div[id^='id_'] and similar selectors without any luck.
Anyone have any ideas of what I could use instead?
Update:
Please note the ID's are unique (AllProtectedServersCompany1, AllProtectedServersCompany2, etc), but they all start with AllProtectedServers. I want to create some CSS that will override the stylesheet for the table that is overriding my changes and use a wildcard so I don't have to specify each one.
Maybe this would help:
td.status.online
{
color: green;
background-color: yellow !important;
font-weight: bold;
}
Alpipego's comment is not correct. You're perfectly fine using ID selectors (#) for CSS. These can be overwritten by other ID selectors of the same or higher specificity (depending on page order) or the !important rule.
However, you want to avoid using !important as a CSS rule because that can back you into a corner and become a maintenance nightmare.
As a matter of fact what you need to learn about is CSS Specificity. I recommend reading the CSS: Specificity Wars for an entertaining but educational overview of how CSS Specificity works.
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Smashing Magazine also published an article on it that's more extensive:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You do want to be careful about not going crazy with specificity. ID's are (supposed to be) unique per page, so if you end up with a lot of deeply nested rules (#foo .bar .baz .goo), you're probably looking at needing some refactoring.
So, if you use Chrome, pop open the developer tool and look at the CSS selector and determine the specificity. All you need to do is:
a) Match the specificity but make your style come later in the DOM page order
or
b) Use a higher specificity
That's all there really is to it.
I hope that helps!
Cheers.
jmbertucci's answer is quite correct, if perhaps a little incomplete, I will expand with some examlpes.
One of the most overlooked aspects of CSS is specificity rules. As mentioned by jmbertucci please see:
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
A little more googling will present a wealth of articles for you.
Let's take some base html and css and a bit of a guess as to what you have.
HTML
<table class="myTable">
<tr>
<td class="status online">Online</td>
<td class="status offline">Offline</td>
</tr>
</table>
CSS
table.myTable td.status
{
background-color:#fff;
}
td.status.online
{
background-color:#f00;
}
Fiddle
This will result in a white background for "online" as table.myTable td.status is more specific than td.status.online.
In this example we need to make the second selector more specific. As you mentioned adding an ID results in what you want as IDs have an extremely high specificity score and a very hard to over-write. So much so that some say never to use them*. A simple solution in this example is to add table to the seconde selector.
table td.status.online
{
background-color:#f00;
}
This results in a red background for "online"
Fiddle
Adding table may not work in your instance. YOu need to find the style rule that is being applied using Chrome Developer Tools or Firebug for Firefox and create a rule that is more specific.
If you provide more information I may be able to provide a more specific answer.
* A note on ID's ID's extremely high specificty is both their strenth and weakness. I believe they can be used, but with caution. If you want to style a specific part of a page in a specific manner, you may have a canditate for ID. Think along the lines of a header and footer before the days of HTML5. Another good example may be <section id="discalimer">, using an ID provies two benifits: it's an anchor for specific styling and it can be linked to, e.g: Disclaimer. A further read: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/
Keep in mind the arguments on weather to use IDs or not are a matter of optinion and their are good points on both sides. W3C, the standards guys, has no stance on this. If where you work has a coding guide, stick to that mandate. If you're unsure, don't use them in CSS to be safe. Most importantly keep IDs unique.
Andy68man, no wildcard needed, just use a class. Same class for all the tables if they all share the same properties. As in (first the HTML):
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers secondClass"> ..... </table>
and the CSS:
.AllProtectedServers td.status.online { ... }
If there are one or more properties that only some of the tables have, create another class and give those particular tables both classes, as in the third line of HTML above.
Alternatively, if that still gets overruled by the CSS above, put a single div round all the tables or even the whole page (or there may already be one), give the div an id, and add that into your selector to increase it's specificty (your first bit of code above shows the extra id will be enough to overrule the other CSS that's causing your problem):
#myDiv td.status.online { ... }
when I do this, it works:
.view-current-sales .col-first a {color:#66ff66;}
when I add the hover, it doesn't work anymore
.view-current-sales .col-first a:hover {color:#66ff66;}
any ideas?
I think you are confusing a few things with the a tag and its accompanied hover counterpart. Let's break it down really fast using a different example.
The HTML:
<div class="nohover3">
Test 3
</div>
The CSS:
.nohover3 a {
color:#66ff66;
}
.nohover3 a:hover {
color:blue;
}
Now, I am assuming you are enclosing these a tags in some sort of div or other containing tag to have it's own separate class. Now, this HTML renders one single a tag that is accompanied by two CSS elements. The first CSS element gives the a tag its starting color, meaning it automatically starts with that lime-green color you have provided me in the original question. The second element gives the hover a different color, in this case, the color goes from that lime-green to blue.
With that being said, let's look at your example but with a bit more cleaned up code:
The HTML
<div class="nohover2">
Test 2
</div>
The CSS:
.nohover2 a {
color:#66ff66;
}
.nohover2 a:hover {
color:#66ff66;
}
In this case, both the first and second element are producing the same color for the a tags. That means the color the a tag is to begin with (lime-green) is the same as the color when you hover over the a tag(also lime-green). Which means it stays the same color whether it is hovered or not.
To paint a clearer picture here is a JsFiddle to represent what I have just said:
DEMO
I apologize ahead of time for the poor class names, creating examples is not my strong suit at the moment.
CSS uses a point-scoring system in determining which conflicting styles to use. Elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points.
Try using "Inspect Element" in your chrome browser or similar in other browser types, it will tell you if another style is scoring higher and thus its hover style is used instead.
If thats the case try replacing the class reference for a:hover to an id reference to obtain a higher score for the a:hover you wish to use.
A nice description can be found here Points in CSS specificity
If all else fails try tagging your hover style with "!important" to ensure the stype is used.
Clean Retina supports Custom Background Feature.
Go to Appearance->Header.
You can either set the image or color as background.
You can see the background preview on the same setting page.
Click on Save Changes.
NOTE:The background effect will only change the content part but not in the header and footer part. If you want the change to reflect in the header and footer as well then write your custom CSS in Appearance->Theme Options->Design Options->Custom CSS input field to hide the Header and Footer pattern. And Save the Changes.
Well this is what i want to do, change the color of the Header and Footer background. I have no experience with CSS and been searching the Internet and tried a quite a few different codes, wich did not work.
If you're using it stock which by your post I assume you are the following needs to be added.
#branding{background-color:blue;}
#colophon{background-color:blue;}
You have to make sure to remove the current background CSS for both those options, they have an image applied which will hide the background-color. If that doesn't work, or you can't access the stylesheet to remove those properties just use the background property and overwrite the current one in the hierarchy like below:
#branding{background:blue;}
#colophon{background:blue;}
Obviously choose your own colour.
I'm guessing from your question that you're very new to web design, so I'll try and explain things as simply as possible.
HTML pages are built up from elements (or tags) such as <div>, <span>, <p>, and so on. Most elements must have an opening tag (e.g. <div>) and a closing tag (normally containing a slash, e.g. </div>). the information between these tags is the element's content, which can be any number of other elements, or just text.
Elements can have classes or IDs, which are what CSS uses to identify which parts of the page you want to change the 'look and feel' of (as well as being used as hooks for Javascript or anchors for links, but we won't go into that now).
A class (e.g. <div class="someClass">...</div>) can be used multiple times on the same page and is prefixed in CSS with a period (.). Any CSS rules that you write for that class will be applied to every instance of that class. For instance:
<style type="text/css">
.someClass {
color: red;
}
</style>
<div class="someClass">Content</div>
<div class="anotherClass">Content</div>
<div class="someClass">Content</div>
This code will turn the text in the first and last <div>s red.
IDs are designed to be unique on the page. These are prefixed in CSS with a hash (#).
For example:
<style type="text/css">
.someClass {
color: red;
}
#myId {
color: green;
}
</style>
<div class="someClass" id="myId">Content</div>
<div class="anotherClass">Content</div>
<div class="someClass">Content</div>
Will result in the first <div>'s text being green, as IDs are more 'important' than classes, as well as the fact that the CSS for #myId comes after the .someClass declaration (rules lower down a stylesheet overwrite those further up, if the level of importance is the same). As an example of this:
<style type="text/css">
.someClass {
color: red;
}
.someClass {
color: black;
}
</style>
<div class="someClass" id="myId">Content</div>
<div class="anotherClass">Content</div>
<div class="someClass">Content</div>
Will result in the first and last <div>'s text being black, as we overwrite our first declaration.
Now! On to your specific question.
What you need to do is find out what the IDs for the theme's header and footer are (I would not be surprised if they're #header and #footer). Then, all you need to do in a CSS file is:
#headerId {
background-color: yourColour;
}
#footerId {
background-color: yourColour;
}
(where #headerId and #footerId are the IDs of the header and footer, and yourColour is the Hex code (or plaintext name) of your chosen colour.)
Hope this helps...
I have 2 css files in my page:
Site.css
jquery-ui.css
Site.css is listed BELOW the jquery-ui css
I have a link that looks like this on my page:
<a class='closeClueTipLink'>close</a>
and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:
I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.
Any ideas or suggestions why this ordering is happening ?
Because there's an a selector just after .ui-widget-content:
.ui-widget-content a
Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.
You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.
Quick Fix:
Add an "a" before your class selector:
a.closeClueTipLink {
Explanation:
It has to do with Specificity [details].
The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'
By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.
Example:
/* css */
div p { color: red; }
p { color: blue; }
<!-- html -->
<div><p>Text</p></div>
The text in the above paragraph will be red because the first CSS item is more specific than the second.
.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.
change it to read
a.closeClueTipLink
Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.
I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.
There are ways you are amend this problem:
Pinpoint the selector like .ui-content-content a.closeClueTipLink
Use !important at the end of color defination. color: #222 !important;[not recommended]