Custom CSS on a class

Question

The footer of my (wordpress)website has the links for the privacy policy and T&Cs. On the rest of the site all links are blue. I would like to override the natural blue color of the hyperlinks and make them white instead:

/* Links--------------------------------------------- */
a {
color: #2557AA;
text-decoration: none;
}

I have a class in the footer called colophon. This is defined as a class to get special formatting. I want the link to appear white. I wrote the following to override the css for the hyperlink so that in the footer it would be white:

/* Footer--------------------------------------------- */
#colophon p {
line-height: 1.5;
color: #FFF;
}
#colophon a {
color: #FFF;
text-decoration: none;
}

Footer.php

<footer id="colophon" >

    <p align="left"> All rights reserved.
    </p>

        <a href="http://example.com/TC">Terms of Use</a> | 
        <a href="http://example.com/Privacy">Privacy Policy</a> 


</footer><!-- end colophon -->

please re-create this scenario using jsFiddle, then people can help you better... take my word on this ;) — Yasser Shaikh
– Yasser Shaikh, Commented Aug 8, 2012 at 17:35
There doesn't appear to be any problems with the code you've provided. — jackwanders
– jackwanders, Commented Aug 8, 2012 at 17:41

Lukas · Accepted Answer · 2012-08-08 17:36:10Z

5

try with important

#colophon a {
   color: #FFF !important;
   text-decoration: none;
}

answered Aug 8, 2012 at 17:36

Lukas

7,78420 gold badges80 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lukas Over a year ago

remember that important overwrite whole style for this element

user1521604 Over a year ago

It is better to fix it properly than rely on !important alone. !important just ups the priority of this css rule to the point it can't be modified by anyone or anything for any reason. Obviously this makes it hard for it to be changed later and is considered a bad practice for any code that will ever be reused or have to be modified by anyone else. You just have another rule somewhere over-riding the #FFF color for a. Which means more code loaded. More rules overwritten, best practice is to eliminate it if you can.

chop · Accepted Answer · 2012-08-08 17:37:17Z

2

Links in the div #colophon will be white with the following code.

#colophon a:link {color:#FFFFFF; text-decoration: none;}
#colophon a:visited {color:#FFFFFF;text-decoration: none;}
#colophon a:hover {color:#FFFFFF; text-decoration: none;}
#colophon a:active {color:#FFFFFF; text-decoration: none;}

This way lets you changed the color depending on the mouse and if is previously viewed. Having it change on hover helps the user know it is a link.

answered Aug 8, 2012 at 17:37

chop

996 bronze badges

Comments

Rakesh Juyal · Accepted Answer · 2012-08-08 17:46:11Z

0

Use !important

#colophon a {
color: #FFF !important;
text-decoration: none !important;
}

answered Aug 8, 2012 at 17:46

Rakesh Juyal

37k74 gold badges179 silver badges218 bronze badges

Collectives™ on Stack Overflow

Custom CSS on a class

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related