What the proper way of redefining link tags?

[OM2]

Can someone tell me what he proper way of redifning the link tage is...?

Similarly for creating a new format link tag.

I always get confused about: link, active, visited and hover??
WHat should I have...!?
Are all of these necessary...?

Thanks.


OM

[Centauri]

If you style just the <a>, the styles will also apply to all the psuedo classes, and if any of these psuedo classes required different styling, only the changes in styling need to be defined.

Example:

a {
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #D7FFFF;
}
a:visited {
  color: #B398FF;
}
a:hover {
  text-decoration: underline;
  color: #FF726F;
}

The psuedo classes should be defined in the order of :link, :visited, :hover, :active and you don't need to define all of them.

[David Harrison]

Don't forget :focus too.

The full order should be:
link, visited, focus, hover, active

I say that should be the order, it doesn't have to be, but you'll get unexpected behaviour otherwise.

Whenever you define hover, you should also define focus, because not all users navigate with the mouse, some tab through the links and without using :focus there's no visual clue as to where they're up to.

You don't need to use any pseudo-classes at all though, a{} will suffice if you don't want to do anything special.

When you do want to do something special though, one or all of these can be deployed:
:link - A link that has not been visited.
:visited - A link that has been visited.
:focus - When the link is selected, either by tabbing to it or otherwise.
:hover - When the mouse is over the link.
:active - When the link is actually being clicked on (alternatively if it is selected and the enter key is depressed).

:hover will also work for other elements (no need to use :focus with other elements though), however it won't in IE6 or lower. So you could use it to add a bit of extra eye candy for those who use browsers that support it, and if you feel like, you could also add in some JavaScript to cater for IE <=6.

The psuedo-classes were only added in CSS 2, pretty much all browsers support CSS 2 now, and the very few old ones still in use aren't really popular enough to worry about. However, whenever I write selectors I still include a plain anchor selector to. Generally this is how it looks for me:

#some-id .some-class a, 
#some-id .some-class a:link, 
#some-id .some-class a:visited
{
  color:yellowgreen;
}

#some-id .some-class a:focus, 
#some-id .some-class a:hover, 
#some-id .some-class a:active
{
  color:fuchsia;
}

[OM2]

guys: thanks for the replies.
that's brilliant: just what i needed.
(everytime i forget... i'll come back and revisit this thread!)

just wanted to check something...
y wouldnt i used:

.some-class a, 
.some-class a:link, 
.some-class a:visited
{
  color:yellowgreen;
}

.some-class a:focus, 
.some-class a:hover, 
.some-class a:active
{
  color:fuchsia;
} 

instead of what u suggested?

and could i have:

#some-id a, 
#some-id a:link, 
#some-id a:visited
{
  color:yellowgreen;
}

#some-id a:focus, 
#some-id a:hover, 
#some-id a:active
{
  color:fuchsia;
} 

instead??

thanks!

[smyhre]

yes you could have either a class or an id in a link however a class can be used more than once per page and could apply to several links and an id can only be used once per page.

However, how he has it as #some-id .some-class a:hover {} means any anchor inside an element of class "some-class" which is also inside the id of "some-id" will be affected. It is an order of specificity so that you can define specific things without affecting others.

[David Harrison]

Yeah, I was just using #some-id .some-class as an addition to the selector to demonstrate that you can also combine other selectors with the pseudo-class link selectors however you like.

[OM2]

an id can only be used once per page.

really...? i didn't know that!
i'm sure i have used the same more than once on a page!!
i better go and check some of my code.
what happens if u do use the same id twice?
y is it wrong to do so?
i've been using them as if they were like a class!

However, how he has it as #some-id .some-class a:hover {} means any anchor inside an element of class "some-class" which is also inside the id of "some-id" will be affected. It is an order of specificity so that you can define specific things without affecting others.

erm... uve lost me with the above. can u explain further what u mean?

[smyhre]

If you use an id of the same name more than once not only will it not varify at http://validator.w3.org/ unexpected things could happen it kinda throws the browser off and it might not display it right.

As for the other part say you have this:

<div id="some-id">
  <p class="some-class">
    Find out about our <a href="fine-wine.html">Fine Wine</a> selection and our <a href="wfamous-cheese.html">world famous cheese.</a>
  </p>

  <p>Get some <a href="info.html">information</a> about our other products</p>
</div>

<div id="footer">
  <p>Do you want to <a href="contact.html">contact us?</a></p>
</div>

Now for the CSS part:

If you wanted to define all links hovers on the page you could use:

a:hover {color:blue;}

But what if you only want to define the hovers of links inside the div id of "some-id" and leave the links in the footer alone? You would use something like this:

#some-id a:hover {color: blue;}

However, what if you only wanted to modify the links of anything within the div id of "some-id" with class of "some-class" and not the links of the footer or the paragraph under it? You would use something like:

#some-id .some-class a:hover {color:blue;}

By writing in the id, class, and the anchor and not just one or the other you can be very specific about which parts of the site are modified just in case you don't want that attribute to affect other parts of the site.

Did that help to clarify what I meant?

[OM2]

As for the other part say you have this:

<div id="some-id">
  <p class="some-class">
    Find out about our <a href="fine-wine.html">Fine Wine</a> selection and our <a href="wfamous-cheese.html">world famous cheese.</a>
  </p>

  <p>Get some <a href="info.html">information</a> about our other products</p>
</div>

<div id="footer">
  <p>Do you want to <a href="contact.html">contact us?</a></p>
</div>

Now for the CSS part:

If you wanted to define all links hovers on the page you could use:

a:hover {color:blue;}

But what if you only want to define the hovers of links inside the div id of "some-id" and leave the links in the footer alone? You would use something like this:

#some-id a:hover {color: blue;}

However, what if you only wanted to modify the links of anything within the div id of "some-id" with class of "some-class" and not the links of the footer or the paragraph under it? You would use something like:

#some-id .some-class a:hover {color:blue;}

By writing in the id, class, and the anchor and not just one or the other you can be very specific about which parts of the site are modified just in case you don't want that attribute to affect other parts of the site.

Did that help to clarify what I meant?

thats really useful and helps a lot.
i think i've gone too long writing badly formatted code.
thanks.

[smyhre]

It's ok as long as you are always learning and correcting as you go