element.style {
float: left;
font-weight: bold;
margin-right: 8px;
}
a:link {
text-decoration: none;
}
front_layout.css (line 21)
Inherited from div#header
#header {
color: #FFFFFF;
}
front_layout.css (line 542)
Inherited from body
body {
font: 75%/160% Arial,Helvetica,sans-serif;
}
These are all the styles showed from firebug for this element.
This element's color is constantly something else, instead of white (visual and in computed part of firebug).
Why is this? What's overriding it's inherited value from #div header?
Edit: the element is a link. <a float: left; font-weight: bold; margin-right: 8px" href="">About Us</a>
It's the default color for a link you are seeing. Add
#header a {
color: #ffffff;
}
and your link will be white.
The color from the container div #header will not be applied to the containing a tag. You have to specify it explicitly.
So the property color refers to the font color. background-color refers to the background color. Not sure if you were confusing those.
If it's font color related try adding !important after the color property and see if that overrides it. If so then it's likely a cascading issue and you need to see what other elements are being set. Do you have a:link { color:red; } somewhere that is causing issues. This can also happen if you have a bad closing tag.
Related
I can't figure out why this won't work. I happen to be using bootstrap as well.
<h1 class="montserrat_text" id="header_title">title</h1>
In the css file .montserrat_text works and the font of the h1 is the correct font.
But when I add #header_title to the css:
#header_title
{
color: red;
font-size: 60px;
}
Nothing happens and the text won't change size or color.
Thanks
The reasons the font color doesn't change was mentioned by #MohammadUsman already - there is no CSS property called font-color, what you want is named color.
The reasons the font-size doesn't change either (even though the property name is correct) could be that your browser ignores rules that follow illegal rules.
For change the color of text you must use color instead of font-color.
According to CSS priority if a selector contain the parents name , this selector has priority for effect than selector that does not contain it.
You must use parent name in selector like :
{# or .}parent #header_title
{
color: red;
font-size: 60px !important;
}
or you can use !important :
#header_title
{
color: red;
font-size: 60px !important;
}
As #Mohammed Usman said, it's color, not font-color.
Also, since you're using Bootstrap, it's possible something is overriding your CSS so you can add the !important tag to ensure that your CSS is used, as so:
#header_title {
color: red !important;
font-size: 60px !important;
}
I have some anchor tags that get dynamic color based upon the classes assigned to them but on focus, they get a white color cause of bootstrap overrides.
now I need to override the default bootstrap style for anchor only with this class say a.custom-label and another generic class to get the original color (before focus) on focus like this:
a.custom-label:focus {
color: unset;
color: initial;
color: revert;
color: inherit;
color: none;
}
I tried these but nothing seems to work, can someone share a way to achieve this?
a.custom-label:focus { color: #000 !important; }
You can change color you want in place of #000. Also if you don't want to use !important then add external css and call it below bootstrap css in head block.
Try putting "!important" after the color name
for examle:
a.custom-label:focus {
color: #2d2d2d !important; }
The best possible way was to remove the default bootstrap label class from my HTML elements and pick all the styles in bootstrap for .label class and paste it in my custom.css with a selector .custom-label except on focus styling like this:
.custom-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
and using only this class for all my elements.
this gives all the default style of bootstrap but as no styling for onfocus was pasted so issue got fixed.
Why doesn't this work (in terms of text color):
.navbarDivText {
color: #DAA520;
}
.navbarDiv {
width: 150px;
background-color: inherit;
margin-left: 10px;
}
<li class="navbarDiv" >
Main Page
</li>
But this does:
<li class="navbarDiv" >
<a href="index.php">
<div class = "navbarDivText">Main Page</div>
</a>
</li>
In this there are two cases if you give the color for list it will change the color of list and the anchor remained blue by default with underline.
If you also want to to change the color of anchor in a list you should have also give the styling for anchor means text-decoration and color whatever style you want.
See example here hope this will help you. Link
More demo: Here
Bootstrap is probably overriding this...
You'll need to be more specific e.g.
a.navbarDivText {
color: #DAA520;
}
You may have to use:
a.navbarDivText {
color: #DAA520!important;
}
If for some reason that doesn't work...
On a side note you should only put a div inside an a tag if you are using the HTML5 doctype, which I imagine you are.
When a link is clicked the browser will give it a color to show it has been visited. So you could try the below :visited selector. If that doesn't work then it is likely that another style is overriding your style. As mentioned in the comments, inspect the element in the developer console and see if your style is being overridden.
.navbarDivText:link, .navbarDivText:visited
{
color: #DAA520;
}
Works fine to me, clear cookies and try.
.navbarDivText {
color: #DAA520;
}
.navbarDiv {
width: 150px;
background-color: green;
margin-left: 10px;
}
<li class="navbarDiv">Main Page</li>
Could do this as well,
.navbarDiv a, a:visited {
color: #DAA520;
}
or
.navbarDivText:link, .navbarDivText:visited {
color: #DAA520;
}
i have the following HTML code:
<div class="impressum">
<a class="impressumstyle" href="https://www.google.de/?gws_rd=ssl">Impressum</a>
</div>
And in my CSS file:
.impressum {
position: relative;
left: 20px;
top: 275px;
background: transparent;
text-align: left;}
.impressumstyle {
font-family: Verdana;
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #fff;
text-decoration: none;}
.impressumstyle:hover {
color: #8d8d8d;}
My problem is, that the link, when i use the top-value in .impressum, does not work anymore. And it does not change its color anymore as well..where is the problem?
Thanks.
try to target your ling directly through whole structure
.impressum .impressumstyle:hover {
color: #8d8d8d;}
or
.impressum a:hover {
color: #8d8d8d;}
or, if you wish to use the hover trigger over .impressum, use
.impressum:hover *{
color: #8d8d8d;}
or also this should work:
.impressum:hover a{
color: #8d8d8d;}
but beware, in some cases, using hover efect on parent element, if you want to change only its child, may not work, it depends on size of parent element. Especially with combination of absolute positioning, you can hover your link, but you actually not hovering its parent element in the same time.
My bad guys, i put this div into another, major div. the top value positioned this underneath the major div, that's why it doesn't work..
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.