Support NeoGAF

pnjtony · Jul 3, 2005

I'm not super good at this, even with dreamweaver, but I wanna know how to make a specific link a color that's not like the rest on the page. In page properties I have the link color (active, hover, etc...) set to #f1f1f1 but there's a certain link I want to make black because it have a white background. How is this done in CSS?

xsarien · Jul 3, 2005

a.SpecialLink {
Put your properties here
}

Should work.

Then, just work the code like so:

<a class="SpecialLink" href="whatever.html">

calder · Jul 3, 2005

Assign that particular link a specific class. For example:

<a href="link.html" class="black">link</a>

And in your CSS, define the styles for the class black, like this, for example:

a.black:link {color: #000000;}
a.black:visited {color: #000000;}
a.black:hover {color: #000000;}
a.black:active {color: #000000;}

pnjtony · Jul 3, 2005

thank you very much. I ended up doing it backwards and set the page link to black and altered the others. I didn't have access to the <a href> of the links in the news script I'm using.

All is well though.

thanks again.

APF · Jul 3, 2005

Semantically, classes are more for categories/groups of elements, while ids are for unique/named elements. So if you just want one specific link to be the different color, it's more meaningful to do:

<html>
<head>
<title>Example</title>
<style type="text/css">
a:link
{
color: red;
}
a:link#blue
{
color: blue;
}
</style>
</head>

<body>
<p><a href="/">Normal Link</a></p>
<p><a href="/">Normal Link</a></p>
<p><a href="/" id="blue">Blue Link</a></p>
<p><a href="/">Normal Link</a></p>
</body>
</html>

If you cannot edit the html of the links themselves, you might be able to target a specific link if it's uniquely located in the document tree. Something like:

div#mainBody>h2>a:link
{
color: blue;
}

(depending on the structure of what you're editing)

Ecrofirt · Jul 3, 2005

w3schools has a very good onlince CSS tutorial.

CrunchyB · Jul 3, 2005

The CSS Zen Garden is a neat site, a lot of CSS examples

borghe · Jul 3, 2005

APF is correct. if you want to just have one link on the entire page a single color, use # instead. However, very rarely is it that we want one specific item on a page a color, usually one specific type of an item, which is where classes come in.

If you used a#linkid (color: blue;} that is fine, but then if you ever decided you wanted a second link to be the same color, you would then have to do a.linktype {color: blue;} and then add a class="linktype" to the <a id="linkid"> to make them the same (well, to link them to allow you to change it more easily).

APF · Jul 3, 2005

Just as long as you have a good knowledge of the structure of your document--and that is reflected in the markup--you won't often need to change class/id attributes in your structural elements. It's rare (unless you're completely redesigning something) to suddenly find out you need to group a bunch of things by class, that you couldn't have anticipated when you were coming-up with the original document structure. So IMO, even when you're not directly styling something in the CSS, it's worthwhile to add things like classes and ids to elements, so long as it remains meaningful.

Support NeoGAF

CSS help please

pnjtony

Member

xsarien

daedsiluap

calder

Member

pnjtony

Member

APF

Member

Ecrofirt

Member

CrunchyB

Member

borghe

Loves the Greater Toronto Area

APF

Member

Similar threads