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?
Related
i want to change color of all my link on the page but it won't work on chrome, works fine on opera. i don't get what's going on can you help me make it work on every browser ??
a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
some textOirase
some textthe mountainssome more text
</p>
</body>
Styling anchor links can be a bit tricky. There are several pseudo classes along with the basic a tag selector that can be used for styling that affect links based on their state.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div>This link starts out blue.</div>
<div>This link *might* be violetred in your browser.</div>
<div>So might this.</div>
<div class="special">Hovering will turn the links aquamarine.</div>
<p>This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</p>
If you ever visited one of the links in your code snippet on your Chrome browser (but not Opera) it will have a different color.
Most likely one or two of the links in the code snippet I provided will already have a different color for you because you visited one of those sites in the past.
To achieve a consistent result, explicitely set both :link and :visited and be mindful of selector specificity.
You can use :any-link to achieve consistent results, which is effectively the same as :link,:visited but keep in mind that not all browser support this newer pseudo-class yet and it has the same base specificity, so it needs to be declared last (This is the reason why the rule in the code snippet is only applied to the last link).
I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.
I would like to apply span to just the highlighted portion. How?
Ex:
<style>
.red {
color: red;
}
</style>
<body>
<p>This <span class="red">is a</span> test.</p>
</body>
This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?
Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.
I think you are looking for ::selection
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
::selection {
background: cyan;
}
Some text
If you want to highlight only the span.red, use the ::selection pseudo-element like so:
span.red::selection { background-color: red }
<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>
Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.
<!DOCTYPE html>
<html>
<head>
<style>
#bg-span {
background-color: #f18973;
}
</style>
</head>
<body>
<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>
</body>
</html>
I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.
JQuery selector for highlighted text
Good Luck
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.
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;
}
I know that IE7 doesn't support the value inherit for any CSS properties except direction and visibility. When a browser doesn't support a value, it should simply not apply the given declaration (that particular line). Does anyone know why IE7 doesn't use the first ul a color declaration, instead choosing to use the plain a color declaration? Is it just ignoring the entire ul a rule?
To be clear: in most browsers the first link is red and the second link is blue. In IE7 the first link is red, but so is the second, even though I have at least one declaration it should understand in the ul a rule.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Inherit Test</title>
<style type="text/css">
body {
color: #369;
}
a {
color: #f00;
}
ul a {
color: #369;
color: inherit; /* this should be ignored by IE7, right? */
}
</style>
</head>
<body>
<p>This is testing a red link in a paragraph.</p>
<ul>
<li>here is a link that should not be red</li>
</ul>
</body>
</html>
color isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color and display are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.