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;
}
Related
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.
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 using Bootstrap CSS on my site and am loading in the <head> element. Just below I load the boostrap I have a <style> element where I am trying to override some CSS from the bootstrap, but it is not overriding it when I look at the Chrome Dev Inspector. I thought elements in element should cascade the previous ?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />
<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>
You probably want !important.
input {
height: 30px !important;
padding: 8px !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
Important:
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.
So !important is the easiest way to override styles, because it is more "specific" than other styles. Please note that overriding styles is very bad practice, especially with !important.
The actual solution: Don't override styles.
The internal or embedded style you created would have a higher "order of importance" than Bootstrap's and cascade over their styles ONLY if the same selector was used in Bootstrap's sheet with the same weight and selectivity. That's not likely the case because they use classes to modify most styles. The "input" element has a weight of 1, so if they use classes with those properties they would easily cascade over your element style (a plain class generally has a weight of 10).
Bootstrap does use an "input" style in their reboot element style sheet, so your sheet would likely cascade over that one style. But I don't see them changing height or padding there so your styles would apply until their custom class changes its property styles further. In addition, their input style changes things you don't, like "margin" and "line-height" which might be affecting your layout further.
My advice is to NOT use "input" or "!important" and instead create a custom class and add the class to your element. Make it more selective than Bootstrap's with a full set of properties so you cascade over Bootstrap's input and class styles but inherit some things you like. This gives you full control now over what you like and don't like in Bootstrap:
body form .myinput{
width:100px
height: 30px;
padding: 8px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
<input class="myinput ..." />
The downfall of most young web developers with CSS is they do not add enough style properties to their styles and rely on either inherited or unknown changes to be cascading down into their elements. Adding a full set of properties gives you total control over how that element looks and what it inherits.
The mystery is gone :)
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.