a {..} and a:link {...}

[webStruck_]

Hi,
I would just like to know what's the difference between the two syntax stated on the title. Is there any difference if I use a or a:link?

[toicontien]

The colon denotes a pseudo class. In the case of a link, it represents the different states a link can be in: link (unclicked, unvisited, and not in focus or hovered on); visited (visited, unclicked, not in focus, and not hovered on); active (clicked); hover (mouse is over the link); focus (the system focus is on the link). Without the colon, you are styling all <a> tags in general:
a {
font-weight: bold;
}

a:hover {
font-style: italic;
}
In the code above, all <a> tags would be boldface. But only when you hover over an <a> tag would it turn italisized:
<a name="menu">Menu</a><br>
<a href="home.html">Home</a>

You generally want to specify your link styles in this order:
a:link {}
a:visited {}
a:hover {}
a:focus {}
a:active {}
The order the styles appear is important. Consider this bit of code:
a:link {}
a:hover {}
a:visited {}
Since the :hover state is defined before the :visited state, the :visited state over-rules the :hover state. In this case, you could hover your mouse over a visited link, and the hover styles won't show. So be careful of the order in which you define link styles.

[webStruck_]

so, if i am to use like

a
{font-weight: bold;}

and

a:link
{font-weight: bold;}


does no difference between the two? it reads the same general unvisited, unhovered, and inactive anchored link?

[ryanbutler]

Not quite...a{} would give ALL links in your website a font weight of bold. a:link describes a behavior...meaning you could have links in certain places that didn't exhibit a font weight of bold, whereas others could. On the surface they seem to mean the same in concept and theory, but they're not.

[webStruck_]

i'm confused. is there any example that implements the functionality of each of the anchors? or simply how do i use those, and when?

[toicontien]

My first post shows you how. The link psuedo classes are a tad confusing at first, but make sense when you take a step back. Here's a link to get you started:

http://www.w3schools.com/css/css_pseudo_classes.asp

[Centauri]

Clarification and simplification maybe required....

a {..} will target all <a> tags, whether they are just anchors or links (<a href>) and all states of links (ie, :link, :visited, :active, :hover)

a:link {..} will only target links , and only unvisited, unactive, unhovered links - those other states will default to their normal styling unless explicity styled otherwise.

Therefore, if you wanted to remove the text-decoration from all links, whether they have been visited or being hovered etc, use the base a { text-decoration: none;}

Clear as mud?
Cheers
Graeme

[webStruck_]

CLEAR AS MUD.

Thanks Centauri. you're the best!