CODEWITHSUNDEEP
htmlcsswordpress
KDEx
KDEx

Reputation: 3667

Custom CSS on a class

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 -->

Upvotes: 0

Views: 214

Answers (3)

Rakesh Juyal
Rakesh Juyal

Reputation: 36799

Use !important

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

Upvotes: 0

chop
chop

Reputation: 99

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.

Upvotes: 2

Lukas
Lukas

Reputation: 7734

try with important

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

Upvotes: 5

Related Questions