How to change link colors using CSS Classes?

[Melissa De Luca]

Hello,

I want to override my css for a page on my site. I am looking to change all of the link attributes to a style i have in place.

The code I have under the style is :

.style14 {font-size: 12px; color: #000000; text-indent: 20px; font-weight: bold; }


I want to add the following to it:

a{font size: 12px,}
a:link {text-decoration: none; color: #00000}
a:visited {text-decoration:non; color: #00000}
a:hover {color: #632568; text-decoration: underline}

Can someone please provide the correct code? I can't seem to figure it out. I am VERY new to css and xhtml.

[AutumnsDecay]

You can simply do:

<a href="yourpage.html" taget="_self"><span class="style14">This is a link</span></a>
 

Style will then adopt all the properties of your 'a' classes, except those that it overwrites, such as font, or color, etc. Anything set by you in style14 will show.

Also, it looks like you're only adding a text-indent and making the font bold. As such, you can eliminate the color in your style, otherwise your link will always appear black. Your font size has also been set by 'a', so you're fine there too. Your style14 should like this:

.style14 {text-indent: 20px; font-weight: bold; }
 

[Melissa De Luca]

Thank You,

But what is the proper code to add the new link attributes to .style 14? Also, in the code you provided, should I remove or replace "this is a link"?

I tried the following but it's not working. I also changed .style 14 to "categories":



.Categories {font-size: 12px; color: #000000; text-indent: 20px; font-weight: bold ;
a:{font size: 12px,}
a:link {text-decoration: none; color: #00000}
a:visited {text-decoration:non; color: #00000}
a:hover {color: #632568; text-decoration: underline}
}

<a href="necklaces2.html" taget="_self"><span class="categories">This is a link</span></a>

ISSUE # 2
Also, is there a way to keep a link colour different ONLY when in a certain page? I am building a site to showcase jewellery and I have categories on the left side of the page ie. bracelets/necklaces etc. I would like the category name to appear in a different colour when a viewer is in that specific page. So if I was looking at necklaces, I would like the word necklaces to be in purple and all other categories in black. All of the categories have .categories style attached to them.

[AutumnsDecay]

As mentioned earlier, <span> will inherit the attributes from <a>. So if <a>'s color is black <span>'s color will be black unless you set it to something different.

Your css has "Categories" and your html calls for "categories". Classes are case-sensitive, as in 'categories' and 'Categories' are different. You also forgot a closing } in your CSS for Categories.

The proper code should be:

.Categories {font-size: 12px; color: #000000; text-indent: 20px; font-weight: bold; }
 
a:{font size: 12px,}
a:link {text-decoration: none; color: #00000}
a:visited {text-decoration:nonn; color: #00000}
a:hover {color: #632568; text-decoration: underline}
}
 
<a href="necklaces2.html" taget="_self"><span class="Categories">This is a link</span></a>
 
 

Also, no, 'This is a link' is just something I threw in there. You can change that to whatever you want, such as 'Necklaces' or 'Bracelets', etc.

As for different colored links, just make another class called Active or something, and change the color attribute to whatever you'd like. Then in your <span> you could do something like:

<span class="Categoris Active">Blah</span>

I believe that should work.

[Melissa De Luca]

Thank you! It worked but not for all my pages.
Also for a:hover the text decoration works which is underline, but the change of colour does not.e Why would that be?

Also, What is the purpose of changing "this is a link" to "necklaces or bracelets?"

I need to get this to work on several different pages. Right now it's only working on necklaces2.html.
Here's the code I plugged in:

.Categories {font-size: 12px; color: #000000; text-indent: 20px; font-weight: bold ;}

a:{font size: 12px,}
a:link {text-decoration: none; color: #00000}
a:visited {text-decoration:none; color: #00000}
a:hover {color: #632568; text-decoration: underline}

<a href="necklaces2.html" taget="_self"><span class="Categories">This is a link</span></a>

<a href="necklaces3.html" taget="_self"><span class="Categories">This is a link</span></a>

<a href="Poducts.html" taget="_self"><span class="Categories">This is a link</span></a>

}

[AutumnsDecay]

Do you have your stylesheet linked, or is it static on every page?

If it's the same on every page, you'll have to modify all your pages.

[Melissa De Luca]

The style sheet .Categories is in a CSS file which is on everypage. So the above code I gave you was entered in my .CSS. It didn't work that way so I just modified it on every page which was a pain in the arse but it worked.

Do you have any idea why the hover colour wouldn't be working? The hover text decoration is working and I find that really weird.

In the future when doing something like this is there a generic way of applying the span. Meaning instead of specifying which word I want it applied to, to just have it applied it to everything under the >categories style?


The website is practically done just some minor tweaking. Once it is I will post the link for you to check it out.

Thanks for all your help :)

[AutumnsDecay]

The issue with doing it like this is that <span> will overwrite whatever the <a> attribute has, including a:hover.

What you could do is:

<a href="yourpage.html" target="_self"><span class="Categories" onmouseover="this.style='color:#ff8b00;'" onmouseout="this.style='color:#YOUR ORIGINAL COLOR'">Your Link</span></a>
 

I know it seems like a lot, but changing the way a link acts on each page, without creating <a> attributes in CSS on every page is a little work.

Additionally what you could do is have all your CSS in one file (style.css, for example). Have your HTML pages use the "<link rel='stylesheet'>" function, but have different <a> attributes on each page.

Hope this clears things up.