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 [B]a[/B] or [B]a:link[/B]?
@toicontienJun 25.2007 — #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: [code=html]<a name="menu">Menu</a><br> <a href="home.html">Home</a>[/code]
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.
@ryanbutlerJun 25.2007 — #Not quite...a{} would give [B]ALL[/B] 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_authorJun 26.2007 — #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?
@toicontienJun 26.2007 — #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:
@CentauriJun 26.2007 — #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 [COLOR="Blue"]{ text-decoration: none;}[/COLOR]