4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Changing color of links in CSS file

by Alan Petersen
3 replies
  • WEB DESIGN
    • |
Hello there,

I'm using a Wordpress Theme where the hyperlinks for H3 tag is the same color as the rest of the text so it doesn't stand out.

I want text that has a hyperlink to be underlined and blue.

Here is the code:

Code:
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 15px;
text-transform: uppercase;
text-align: left;
  color: #000000;
}
If I change the hex color from 000000 to 222288 it changes it for all the H3 tags. I just want the text with a hyperlink to be underlined and the txt color to be blue. Like a traditional hyperlink.

Like This

Anyone know what I need to change or add to the code in order to make do what I explained?

Thanks,
Alan
#changing #color #css #file #links
  • Profile picture of the author Bruce Hearder
    Hi

    Try something like this :
    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 15px;
    text-transform: uppercase;
    text-align: left;
    color: #000000;
    }
    h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 15px;
    text-transform: uppercase;
    text-align: left;
    color: #0000FF;
    }

    The second bit over-rides the first lot of settings.

    Hope this helps

    Bruce
    {{ DiscussionBoard.errors[1765905].message }}
    • Profile picture of the author Alan Petersen
      Thank you so much Bruce! I just copied and pasted your code and it worked like a charm!
      Signature
      {{ DiscussionBoard.errors[1767522].message }}
      • Profile picture of the author Bruce Hearder
        No problems Alan,

        If you want to make it even more simpler, then it could be reduced to this :

        h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
        {
        font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
        font-size: 15px;
        text-transform: uppercase;
        text-align: left;
        color: #000000;
        }

        h3 a, h3 a:link, h3 a:visited, h3 a:hover
        {
        color: #0000FF;
        }

        This assumed the link in a h3 tag will have the same properties as defined above. If not you can then insert them into the second block and change them as you see fit..

        Take care

        Bruce
        {{ DiscussionBoard.errors[1767542].message }}

Trending Topics