[HTML/CSS] Specific class for certain links

[warz]

Sorry for the repost. I didn't see the web dev forum.

Ok, I've got a few links on my page I want to use their own class. I've got it setup like so..

Code Select Expand


a.HL, a.HL:link, a.HL:visited {
font-family: Arial, sans-serif;
color: #7DCF12;
font-size: 12px;
text-decoration: none;
}

a.HL:active, a.HL:hover {
color: #B1FF4B;   
font-size: 12px;   
}

<a class="HL" href="...">link</a>


im not very good at CSS. Anyone know why these links aren't adopting their styles?

[Akamas]

Worked for me.....

My code

Code Select Expand


<style>
a.HL, a.HL:link, a.HL:visited {
font-family: Arial, sans-serif;
color: #7DCF12;
font-size: 12px;
text-decoration: none;
}

a.HL:active, a.HL:hover {
color: #B1FF4B;   
font-size: 12px;   
}
</style>
<a class="HL" href="...">link</a>


The only thing I added was, <style> and </style> around your CSS.

[Spht]

You should use ID selectors for this type of thing.

ID selector applies to an element that have an id set.  Note that an id is unique.  The ID selector contains a '#' immediately followed by the ID value.

Code Select Expand

a#HL, a:link#HL, a:visited#HL
{
     font-family: Arial, sans-serif;
     color: #7DCF12;
     font-size: 12px;
     text-decoration: none;
}

a:active#HL, a:hover#HL
{
     color: #B1FF4B;   
     font-size: 12px;   
}

Code Select Expand

<a id="HL" href="...">link</a>

[R.a.B.B.i.T]

Another solution is this.

[FrOzeN]

@Rabbit, your way is good.. but better used if that link is only a One off. If you have alot of links using that style and ID would be more suited.
---

With the <style></style> shouldn't it be declared as.. <style="test/css"></style> ?

[EDIT] I mean, <style type="text/css"></style>.

[venox]

If this is just 1 single link on the page, you could use what spht suggests and it would still be valid source.  However, the same ID should not  be refered to twice (or more) in one page.  That's a no no.

If you are planning on using this color/style for more than one link on any given page... use the following CSS:

Code Select Expand


.HL a:link, .HL a:visited {
     font-family: Arial, sans-serif;
     color: #7DCF12;
     font-size: 12px;
     text-decoration: none;
}

.HL a:active, .HL a:hover {
     color: #B1FF4B;   
     font-size: 12px;   
}

<a class="HL" href="...">Link</a>


[JTN Designer]

Personally, I just use:

Code Select Expand

.class1 a:link / .class2 a:link

Code Select Expand

<span class="class1"><a href=link>link</a></span>

[R.a.B.B.i.T]

@Rabbit, your way is good.. but better used if that link is only a One off. If you have alot of links using that style and ID would be more suited.
---

With the <style></style> shouldn't it be declared as.. <style="test/css"></style> ?

[EDIT] I mean, <style type="text/css"></style>.

Personally I use a <link /> to include my CSS docs, but that's just me.  I prefer to superclass everything and then just either subclass or template what I need/want to change.