CODEWITHSUNDEEP
htmlcss
Kristoff
Kristoff

Reputation:

Hyperlink Formatting/Colors Issue

I am attemping to change the colour of hyperlinks on a specific page http://www.e-rotaryofwalesandwest.org/about/how-to-join. As the background is a different colour, I need to change the hyperlink colour. Otherwise, it will not be visible.

I have set a css class called .howtojoin

I've added to the child theme css stylesheet and it's not working. What am i doing wrong?

CSS

a.howtojoin:link {color:#ffffff;}
a.howtojoin:visited {color:#cccccc;}
a.howtojoin:hover {color:#ffcc00;}

HTML

<div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left howtojoin et_pb_text_1">

<p>An Exisiting Rotarian? Thinking of Transferring? Too Busy to attend a more traditional club? Work getting in the way? Attend the weekly online meetings from the comfort of your home or wherever suits. Discuss and exchange ideas with others on our forums. If time is limited but you still want to serve our e-Club is for you.</p>
<p>If you are an existing Rotarian and want makeup your hours by attending our online meetings. Contact us (below) and for no charge* you can join one of our online meetings for your <a href="http://www.e-rotaryofwalesandwest.org/about/e-makeup/">Rotary e-Makeup</a>. That's the beauty of an online Rotary e-Club!</p>
<p>*Subject to change.</p>

</div>

In my defence I have been researching and looking on youtube etc. and still none the wiser. So as a last resort, I'm asking you experts here. I'm not one for just asking everything without trying to fix it myself first.

Cheers,

Kristoff

Upvotes: 0

Views: 78

Answers (2)

Ben Bozorg
Ben Bozorg

Reputation: 184

The best thing you can do is to add a class to your specific page like: (or simply add this class to your body tag)

<div class="how-to-join">
    <!-- ... Rest of the code -->
</div>

Then in your CSS you would be able to target that page only by writing:

.how-to-join p a:link {text-transform:none;color:#ffffff}
.how-to-join p a:hover {text-transform:none;color:#ffcc00}
.how-to-join p a:active {text-transform:none;color:#00ff00}
.how-to-join p a:visited {text-transform:none;color:#cccccc}

You are now targeting that "Page" first, then telling the browser to look for EVERY "P" tag it founds. then to target all the "a" tags to apply your CSS rules.

If it doesn't matter to target "a" tags inside "p" tags, and you wish to apply the rules to all "a" tags in the page, simply just remove the "p" from your CSS selector to be like:

.how-to-join a:visited {text-transform:none;color:#cccccc}

Your code : a.howtojoin:link {color:#ffffff;}

Is interpreted as this (in simple English) : Find all "a" tags which have the class "howtojoin", which is not probably what you wanted.

Upvotes: 1

KimvdLinde
KimvdLinde

Reputation: 617

Change the CSS to:

.howtojoin a:link {color:#ffffff;}
.howtojoin a:visited {color:#cccccc;}
.howtojoin a:hover {color:#ffcc00;}

The first selector encountered is the .howtojoin and then the link (a) comes in play.

Upvotes: 4

Related Questions