Valhalla Legends Archive

Programming => Web Development => Topic started by: warz on August 16, 2005, 10:45 PM

Title: [HTML/CSS] Specific class for certain links
Post by: warz on August 16, 2005, 10:45 PM
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..


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?
Title: Re: [HTML/CSS] Specific class for certain links
Post by: Akamas on August 17, 2005, 12:17 AM
Worked for me.....

My code

<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.
Title: Re: [HTML/CSS] Specific class for certain links
Post by: Spht on August 17, 2005, 10:44 AM
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.

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


<a id="HL" href="...">link</a>
Title: Re: [HTML/CSS] Specific class for certain links
Post by: R.a.B.B.i.T on August 17, 2005, 04:28 PM
Another solution is this (http://forum.valhallalegends.com/phpbbs/index.php?topic=12546.0).
Title: Re: [HTML/CSS] Specific class for certain links
Post by: FrOzeN on August 28, 2005, 12:18 AM
@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>.
Title: Re: [HTML/CSS] Specific class for certain links
Post by: venox on August 28, 2005, 04:20 AM
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:


.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>
Title: Re: [HTML/CSS] Specific class for certain links
Post by: JTN Designer on August 28, 2005, 11:18 AM
Personally, I just use:

.class1 a:link / .class2 a:link

<span class="class1"><a href=link>link</a></span>
Title: Re: [HTML/CSS] Specific class for certain links
Post by: R.a.B.B.i.T on August 28, 2005, 04:55 PM
Quote from: FrOzeN on August 28, 2005, 12:18 AM
@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.