Difference in CSS' "a" and "a:link" tags?

D

daedal

Gawd
Joined
May 10, 2005
Messages
686
When defining link colors, what is the difference in these two?

a { ... }
a:link { ... }
 
a - effects all links
Code: 
a { text-decoration:none; }
would be applied to all links so no underline anywhere

a:link is a psuedo class of which there are 4

a:link - unvisited link
a:visited - obvious
a:active - selected link
a:hover - link being hovered over

eg below would set links to green, and upon hover change to red, make bold and underline
Code: 
a:link, a:visited, a:active { 
color:green; 
font-weight:normal; 
text-decoration:none; 
}
a:hover { 
color:red; 
font-weight:bold; 
text-decoration:underline; 
}
 
Ever see "http://foo.com/bar.html#baz"? That means there's a "<a name="baz">" somewhere.

Anchors are not just hyperlinks - they can also be named locations on a page.
 
distortedmind said:
a - effects all links
a { text-decoration:none; }[/code]
would be applied to all links so no underline anywhere (snip)
Click to expand...

Awesome. Got it, thanks. Here's another one for ya.

I've got a "title" class defined. Now I want that class' links to have no text decoration, so it would be:

.title a { text-decoration: none; }

Right? It doesn't seem to be picking it up though. Am I missing something here?
 
daedal said:
Awesome. Got it, thanks. Here's another one for ya.

I've got a "title" class defined. Now I want that class' links to have no text decoration, so it would be:

.title a { text-decoration: none; }

Right? It doesn't seem to be picking it up though. Am I missing something here?
Click to expand...

that looks fine. are you sure you are calling it as a class (<div class="title">) and not and id (<div id="title">) ? or overriding it with a later class?
 
I'm calling is as a class, because it picks up it's normal definition.

So I have:
Code: 
.title {
	font-family: "Lucida Grande", Georgia, serif;
	font-size: 1.7em;
	color: #CC3300;
}

.title a { text-decoration: none; color: 00FF00; }
 
im guessing you have .title inside the linke like <a href="blah" class="title">blah</a>


if you do it like that, which is a very bad way of doing it, you would simply leave the "a" out like:

.title { text-decoration: none; }

instead of

.title a { text-decoration: none; }


-----

on a side note, if you are using .title that makes me think you are using this to style an element that should probably be a H1, H2, or H3.

it would be better to use the H's and style them like so:

H2 a { text-decoration: none; }
 
If you have <a class="title">blah</a> then what you'd want is:

Code: 
a.title {
     text-decoration: none;
}
 
[EDIT] Found it. I had declared my <a> outside my <span>
So I just defined the <a>'s class like mentioned above.
Thanks guys!
 
Incidentally, I recommend purchase of a good CSS book. I like Cascading Style Sheets: The Definitive Guide by Eric Meyer (widely considered an expert in all things CSS). It sounds like you're just starting off in CSS--glad to see it!--so I suggest you learn the best way to do things, rather than plugging things in until they work. That may get you by for now, but in the end things will be so much better for you when you can code these things in your sleep.

Good luck on your adventure!
 
You must log in or register to reply here.
Back
Top