I feel like this is a very silly question. I am trying to have a child element to have a different style from its parent.
As in this JSFIDDLE example. The id logo should have an orange color. However, it's currently in black because of the style for a. How to overwrite the color and change it to orange?
Thank you
html:
<p id="logo">LOGO</p>
css:
a {
text-decoration: none;
color: rgba(0,0,0,1.00);
}
#logo{
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
color: #FF9D00;
}
Either set it more explicitly with #logo a, or set the color for the logo as !important which will prevent it from being overridden from a higher priority:
color: #FF9D00 !important;
OR
#logo a {
color: #FF9D00;
}
Related
I have tried a number of other solutions from similar questions, but none have worked.
I have a link;
Home
which is within a <div>. I am using an external CSS style sheet.
a:link {
color: black;
text-decoration: none;
font-family: sans-serif;
}
font-family is working, but color and text-decoration aren't. I am having a similar problem with a:visited as well.
I have tried creating a specific class for this link, but this has had no effect. I have also tried using 'div a:link' in my style sheet, which has also had no effect.
I am reluctant to use <a href="home.html" style="the style I want"> as there are quite a few links that need to use the same style.
Try this:
div a {
color: black;
text-decoration: none;
font-family: sans-serif;
}
or... give the div a class name like:
.nav a {
color: black;
text-decoration: none;
font-family: sans-serif;
}
<div class="nav">
Home
</div>
It seems some other css is already there in your page and it is getting inherited. Try this,
div a {
color: black !important;
text-decoration: none !important;
font-family: sans-serif !important;
}
im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change
My HTML is this;
<div id="commentslink">
<div class="circle">
<p>10</p>
</div>
</div>
and my CSS is this
a:link, a:visited {
color: #0eb0d3;
text-decoration: none;
}
a:hover {
color: #0eb0d3;
opacity: 0.4;
text-decoration: none;
}
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
.circle {
float: right;
background-color: #f89b2d;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin-top: -10px;
margin-right: 20px;
}
First of all its only color and not font-color: #ffffff; and secondly you should use
#commentslink a { /* Specific selector */
color: #fff;
}
Demo
Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like
#commentslink .circle p a {
/* Selects all a element nested inside p tag further nested inside an element
having class .circle which is further nested inside an element having
#commentslink as an id
*/
color: #fff;
}
Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.
Last but not the least, this has nothing to do with CSS3
Just a good read here.. related to this answer...
Try this with !important
#commentslink {
float: right;
color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
and use color: rather than font-color
Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.
Here's a good article on specificity.
And as others have stated, the property is color not font-color.
#Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.
The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.
Change
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
To
#commentslink {
float: right;
font-color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
And it will override the other styling
Replace font-color with color.
#commentslink {
float: right;
color: #ffffff; // this is enough not font-color
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
Also
a:link, a:visited {
color: #0eb0d3; // Also this a css override
text-decoration: none;
}
Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers.
#commentslink a {
color: #ffffff;
}
Thanks #Mr. Alien for his fiddle and the SO link.
I thought I would be clever and remove my "author" class from the jsfiddle here: http://jsfiddle.net/clayshannon/cMYEH/3/ and replace it with "cite" in the CSS, with an eye on reducing the size of the HTML.
The only element that has the "author" class applied to it are the "cite" elements. So it should work exactly the same, right? But when I changed the CSS from this:
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
...to this:
cite {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
...the name no longer displays -- it's as if it is "painted in black." Why would the color (White) not be applied?
UPDATE
Dang it! I messed up again...Actually, I miswrote: it was/is the "title" class that was inside the "cite" element, not author - hence causing all this confusion!... http://jsfiddle.net/clayshannon/cMYEH/5/
Your <cite> element has a class title with associated styles, which is overriding it, because class selectors are more specific than element selectors.
This is a nice resource on the topic: http://css-tricks.com/specifics-on-css-specificity/
update
Adding some examples to clarify;
css
.title {
color: blue;
}
/* will override .title because they have same specificity but is defined later */
.author {
color: red;
}
/* will not override any class selector even when defined last*/
cite {
color: green;
}
html
<cite class="title">will be blue, not green</cite>
<cite class="title author">will be red, see comment in css</cite><br>
See demo at: http://jsfiddle.net/K7r56/
You forgot to add the cite css block into the fiddle or forgot to change .author to cite
http://jsfiddle.net/cMYEH/4/
cite {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
If this does not look right then refer to xec's answer
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important