I am currently using:
a:link {
color: #FF0000;
text-decoration: underline;
}
But on a certain page in my website I want to be able to have my links in a separate colour.
What is the best way to do this through CSS?
I don't want to do:
<font color="#00FF00">...</font>
As i know this is deprecated code
Add a class to every link you want to affect:
HTML: Link
Then add this CSS or similar to your style sheet:
CSS: a.alternate {color:#00FF00;} //or whatever
Demo: http://codepen.io/hwg/pen/Aalkb
apply different class attribute to that link. for ex:
HTML
link1
link2
CSS
a:link {
text-decoration: underline;
}
.red{
color: #FF0000;
}
.black{
color: #000000;
}
see this Fiddle
Related
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
I'm trying to stop a link from turning purple when you click it. My link is within a div with the class name "header". My code doesn't seem to work and the link just stays purple.
.header a:visited {
color: black;
}
The :visited selector is used to select visited links. If your HTML looks the same as below it should be working, Possibly you might want to use :focus or :active?
.header a:visited {
color: black;
}
.header a:focus {
color: pink;
}
<div class="header">
sdfsd
</div>
a:visited {
color: black;
}
<div>
Link
</div>
try ctrl + shift + r, might just be a browser cache thing.
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
In my Page the following CSS is set:
a:link {
color: #0094DE;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0094DE;
}
a:hover {
text-decoration: underline;
color: #DD127B;
}
I want to Change the Link color inside a div which has a class assigned to it.
I tried the following :
register:link{color:#FFFFFF;
}
Where register is the name of the div in which i want to change the link color.
How can i do that?
Also how to change the color for hover link over the same div?
.register a:link{
color:#FFFFFF;
}
It can be something like this:
a.register:link { color:#FFF; text-decoration:none; font-weight:normal; }
a.register:visited { color: #FFF; text-decoration:none; font-weight:normal; }
a.register:hover { color: #FFF; text-decoration:underline; font-weight:normal; }
a.register:active { color: #FFF; text-decoration:none; font-weight:normal; }
how about something like this ...
a.register:link{
color:#FFFFFF;
}
I think there is a confusion about what the OP is actually asking.
This solution:
a.register:link {color:#FFF}
...changes the color of a link whose class is "register". But that's not what the OP was asking.
And this solution:
.register a:link {color:#FFFFFF;}
...changes the color of a link that itself has no class but is placed inside of a div with class "register". And that's what the OP was asking.
Both of these answers are being upvoted here but only the second one is correct answer to the original question.
#register a:link
{
color:#fffff;
}
If you want to add CSS on a:hover to not all the tag, but the some of the tag, best way to do that is by using class. Give the class to all the tags which you want to give style - see the example below.
<style>
a.change_hover_color:hover {
color: white !important;
}
</style>
<a class="change_hover_color">FACEBOOK</a>
<a class="change_hover_color">GOOGLE</a>
I think you want to put a, in front of a:link (a, a:link) in your CSS file. The only way I could get rid of that awful default blue link color. I'm not sure if this was necessary for earlier version of the browsers we have, because it's supposed to work without a
smaller-size version:
#register a:link {color: #fff}
Is there a reason my below CSS only half works?
div.share
{
position:relative;
top: -4px;
left: 25px;
font-family:Tahoma;
background-color:#000000;
font-size:11px;
font-weight:bold;
}
/* share link css */
a.share:active
{
color: #000000;
}
a.share:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
The div.share CSS is all working but the CSS for the active and hover is not
CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:
div.share a:active
{
color: #000000;
}
div.share a:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
adding your html would make this easier.
I can only guess that you have a <div> with class='share' and no <a> tag with the same.
e.g., does your html look like:
<div class='share'>
<a class='share' href='http://yoursite.com'>Your site</a>
</div>
or
<div class='share'>
</div>
...
<a class='share' href='http://yoursite.com'>Your site</a>
If it's the first, then
div.share a:hover {
...
}
would make more sense.
If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.
Use div.share a:active and div.share a:hover.
The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.
Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?