I have a CSS file with some div styles and this CSS has a body, like this:
css1.css
body{
background-color:#000;
}
#div1{
...
}
#div2{
...
}
in a page I want to use some divs that are in css1.css but with a different body color.
So I create another css for this:
css2.css
body{
background-color:#fff;
}
so in this page I have:
<link rel="stylesheet" type="text/css" href="css1.css">
<link rel="stylesheet" type="text/css" href="css2.css">
css1.css has a body and css2 too, is it right? Can I have any problem doing this?
You don't need all that, you can simply set different background colours to the divs. You can give them different IDs or classes and work your css around that.
HTML:
<div id="one">this is div one</div>
<div id="two">this is div two</div>
CSS:
div#one { background-color: blue; }
div#two { background-color: red; }
You could also change your body with different classes on different pages that consume the same CSS. I hope this solves your problem.
It is OK. The last declaration will take precedence over the first, assuming the selectors are the same.
Yes you can!
Although you may need to look at css selector specificity:
https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm. Here is a more illustrated resource:
from https://css-tricks.com/specifics-on-css-specificity/
The specificity depends on the number of tags, ids, classes, pseudo-classes etc that are contained in your selectors. If there is a tie between selectors then the order matters.
Those two selectors (for body) have the same specificity (=0001) so the second one will override the common properties of the first.
Or in other words the body background-color will be #fff :). If that is useful to you is a different question.
Related
I have a stylesheet which has the following property,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#FFFFFF!important;
}
I can't edit the stylesheet. How do I change the property to
color:#000000!important;
I tried to write the following code in another stylesheet,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#000000!important;
}
but it did not work. Please guide. Thanks.
Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:
Change order of stylesheet
Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->
Inline HTML
If you can change your HTML, you can use this:
<span style="color: #000000 !important;">
!important in inline style will have higher priority than in other types of styles.
Did you try using:
.primary-nav .suppa_rwd_button span{
color:#000000!important;
}
Other way could be using JavaScript:
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Cheers!
In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:
nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
color:#000000!important;
}
* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.
In both cases you have to also use !important in your new rule.
Reference: MDN - Specificity
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I am trying to change width of a drop-down in my application by setting width attribute of select tag. But width provided by me does not have any effect as it is pre-specified in global style-sheet file for select tag. I Don't want to change the global CSS file. But is it possible to re-size my drop-down without changing global CSS?
I will disagree using !important should be used only when it is really needed, because in the longrun it will cause issues for people who will maintain the code.
1) Create a separate css file & and place your rules there.
2) Include it after bootstrap includes.
3) Make sure to be specific regarding the path of your html element you need to change
For example if this is specified
<!DOCTYPE html>
<html>
<head>
<style>
div#test table#sometable td#sometd{
color: #000;
}
td#sometd{
color: #fff;
}
</style>
</head>
<body>
<div id="test">
<table id="sometable">
<tr>
<td id="sometd">
hello
</td>
</tr>
</table>
</div>
</body>
</html>
The 'hello' text inside teh cell will remain black although you have td#sometd{color:#fff;}
This occurs because the prior css rule is more specific than the second one, hence your overriding rule could simply be:
div#test table#sometable td#sometd{
color: #fff;
}
You should use !important wisely & as a last resort if you want to override other !important rules or inline css.
Avoid using !important, try do overwrite the specificity.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You need to add !important after your definition:
.dropDownCustom
{
width: 100px !important;
}
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?
Quite confused here.
<html>
<head>
<style>
.one
{
font-weight: normal;
}
.two
{
font-weight: bold;
}
</style>
<body>
<p class="two one"> Test!!!!!</p>
</body>
</html>
Why is Test bold? I'm clearly defining "normal" for the font weight "after" the bolded one?
I thought CSS did the cascading based on what order the classes were added right? Not the location in the file?
CSS doesn't care what order you specify the classes inside your class attribute.
Here, both classes have equal specificity, so the class lower down in your CSS "wins".
Specifics on CSS Specificity - a well written article explaining specificity.
Pointless demo of your code: http://jsfiddle.net/JwhmE/
It doesn't go off the order of the classes on the div but the order they are defined in the style rule.