CSS 101 | Part Nine - CSS and Links
Welcome to the CSS 101 series, Part Nine CSS and Links. In this instalment, we will be discussing how to format links with CSS.
The a tag
Links are represented by the a tag. They have four states, which are written below how you would use them in your CSS:
a:link- the state of the link before it has been clicked on.a:visited- the state of the link after it has been visited.a:active- the state of a link right after being clicked.a:hover- the state of the link when the mouse moves over it.
:link, :visited, :active, :hover are what we call pseudo-classes and represent the state of a link within CSS.
Example
CSS Code:
a:link {
color:cyan;
}
a:vsited {
color:magenta;
}
a:active {
color:yellow;
}
a:hover {
color:black;
}
(X)HTML Code:
<a href="#">Click me!</a>
Result:
The CSS Link properties
In the last instalment, we covered many of the properties you will undoubtedly use on your links; these are listed below, as well as a new property -- text-decoration, which creates a line underneath, above or through a link. There are a several other properties that come in handy when styling links, but these are beyond the scope of this tutorial as they involve more complex CSS (not to worry, we will cover them later).
- color * - change the colour of a link
- font * - a shorthand property to change various font properties all at once
- font-family * - specify a font family for a link
- font-size * - set the font size of a link
- font-style * - make a link italic and turn it back to normal
- font-weight * - make a link bold and turn it back to normal
- text-decoration - add a line above, under or through a link
- text-transform * - change the case of a link
Links marked with an * open up a different tutorial in a new page.
Introducing text-decoration
The text-decoration property is applied only to links, and is used to add a line either under, above or through a link; it is also used to make a link "blink" (which is annoying and should be avoided).
text-decoration has five properties:
- blink - makes a link blink in and out.
- inherit - sets the text decoration to whatever it is set to on the parent element, or an ancestor element. This doesn't work in versions of IE below 8.
- line-through - adds a line through the link.
- none - removes any "decoration" from the link, so it will not blink, nor will it have a line above it, underneath it or through it.
- underline - adds a line underneath the link.
- overline - adds a line over the link.
CSS Code:
/* This link blinks */
a {
text-decoration:blink;
}
/* This link has a line through it */
a {
text-decoration:line-through;
}
/* This link has no decoration */
a {
text-decoration:none;
}
/* This link is underlined */
a {
text-decoration:underline;
}
/* This link has a link above it */
a {
text-decoration:overline;
}
(X)HTML Code:
<a href="#" title="Isn't it annoying?">This text blinks.</a>
<a href="#" title="This looks cancelled out...">This link has a line through it.</a>
<a href="#" title="Nothing at all!">This text has no text decoration applied to it.</a>
<a href="#" title="Default link style">This link is underlined; underline is generally regarded as the default text decoration.</a>
<a href="#" title="This looks weird">This link has a line over it.<a/>
Result:
This link has a line through it.
This text has no text decoration applied to it.
This link is underlined; underline is generally regarded as the default text decoration.
In this example we are not using inherit, because thee is nothing to inherit from.
CSS Shorthand
It is more efficient to use shorthand — like in the text-decoration examples above — to target the a tag, in general, and add in any pseudo-classes that are needed after. When writing shorthand, we do away with :link (it's not needed in shorthand), and often :active as it doesn't serve much of a purpose; :hover and :visited are useful in user interaction, so it's beneficial to keep these.
Example of CSS shorthand with links
CSS Code:
a {
color:#F3C;
font-style:italic;
font-size:130%;
}
a:hover {
color:#FF6;
}
a:visited { /* If you want to style your visited links - not everybody does*/
color:#69C;
}
HTML Example:
<a href="#">I take up less lines of code :)</a>
Result:
I take up less lines of code :)
In depth styling of links
Applying a class to a link
To apply a class to a link, you apply a class to your element using the HTML class attribute, and target that class using the CSS class selector.
CSS Code:
a.classEx {
color:#C3F;
text-transform:uppercase;
}
(X)HTML Code:
<a href="#" class="classEx">I am uppercase and magenta!<a>
Result:
Applying styles to links via the ID selector
If an element has an ID, it may be preferential to style that element up using the ID selector. The ID selector takes the form of a hash, followed by the ID of the element.
CSS Code:
a#IDEx {
color:#669;
font-weight:bold;
}
(X)HTML Code:
<a href="#" class="IDEx">I am bold and purple!<a>
Result:
Link titles
This isn't strictly CSS, but something you'll want to abide by. Whenever you create a link, remember to give it a title. Titles are important for accessibility, search engine optimisation, and to give your visitors an idea of what is to come when they click on a link.
Titles are applied to a link via the title attribute, as seen below.
How to apply a title to a link
(X)HTML Code:
<a href="http://www.ccw.gov.uk" title="Visit the CCW website for more on agriculture in Wales">The Countryside Council for Wales (incidentally where I work, as an Oracle developer, not some sciencey person!).<a>
Result:
A note on links and overriding
You may encounter this issue a lot, when styling links, so I have addressed it here; luckily it's easy to resolve. When styling links, if you create a style for a link based off its class or ID, for example, (as we've done above) and you've already got styles applied to your a tag, you will notice some of the styles aleady on the a tag will appear on your new links. This is because CSS cascades. Styles applied to an element will seep down the hierarchical chain to other instances of that element. The way to get around this is to hut down the properties you don't want visible and cancel them out, as seen below. If you're unclear about how the position of CSS elements within a stylesheet can affect their rendering, please see CSS 101 | Part Four - The CSS Order of Precedence.
Example on cancelling out undesirable link styles
CSS Code:
a {
font-weight:bold;
text-decoration:underline;
color:purple;
}
a.classEx2 {
font-weight:normal;
text-decoration:none;
color:orange;
font-size:140%;
}
HTML Example:
<a href="#">I am the Almighty A Tag. Tremble at my feet!<a>
<a href="#" class="classEx2">I cancel out the styles on The Almighty A Tag. Mwahaha!<a>
Result:
I am the Almighty A Tag. Tremble at my feet!
I cancel out the styles on The Almighty A Tag. Mwahaha!
Issues you're likely to encounter
If you're placing a class or an ID on a link using shorthand, and at the same time, need to create a hover and visited state, you will notice that the styles for the pseudo-classes will not be displayed. This is because the a tag covers all of the link states, and thus will override anything you try to place on them. The only way to get round this is to use the CSS !important keyword. Let's see how we do that.
CSS Code:
a.override {
color:#C33;
font-size:120%;
}
a.override:hover {
color:#C9F !important;
text-decoration:none;
}
a.override:visited {
color:#36C !important;
}
(X)HTML Code:
<a href="#" class="override">I am shorthand, yet my pseudo-classes work!</a>
Result:
Drop me a line
Got any questions? Get in touch via the contact form or email me @ helen@alternategateways.com.
