Learn how to style links in a Web page using CSS. This article shows you how to add CSS styles to any type of link, including non-visited, visited, active, and hovered links.
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
normal links
* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
Different link states
CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.
Here are the 4 pseudo-classes that you can use to select and style the different link states in
CSS:
a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor
Selecting links regardless of their state
As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:
a { color: pink; } /* Set all links to pink */
However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:
a { color: pink; }
a:visited { color: green; }
Mixing pseudo-classes with classes and ids
You might want to style only certain types of links within your website. To do this, assign a class to the links:
Home
You can then style those links using pseudo-classes as follows:
/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }
If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example
<a id="home" href="home.html">Home</a>
...
/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }
Some examples
Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.
Styling link colours
It's easy to change the colour of links from the default values. On most browsers, the default link colours are:
:link - blue
:visited - purple
:active - red
Here are some examples of how to change link colours:
/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }
/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }
/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }
INFO
Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.
Turning off underlines on links
To remove the underlining from text links, use the text-decoration property, as follows:
a { text-decoration: none; }
To remove the underlining from links except when they're hovered over, use:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Giving links a button effect
You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:
a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
Adding background images to links
Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:
a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
Replacing link text with an image
What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.
First, put your link text within a span element in your markup:
<a href="home.html"><span>Home</span></a>
Then you can style the link as follows:
a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}
a span
{
display: none;
}
First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.
Here's how the above example looks:
INFO
Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.
Article Source : http://www.elated.com/articles/styling-links-with-css/
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
normal links
* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
Different link states
CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.
Here are the 4 pseudo-classes that you can use to select and style the different link states in
CSS:
a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor
Selecting links regardless of their state
As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:
a { color: pink; } /* Set all links to pink */
However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:
a { color: pink; }
a:visited { color: green; }
Mixing pseudo-classes with classes and ids
You might want to style only certain types of links within your website. To do this, assign a class to the links:
Home
You can then style those links using pseudo-classes as follows:
/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }
If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example
<a id="home" href="home.html">Home</a>
...
/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }
Some examples
Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.
Styling link colours
It's easy to change the colour of links from the default values. On most browsers, the default link colours are:
:link - blue
:visited - purple
:active - red
Here are some examples of how to change link colours:
/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }
/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }
/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }
INFO
Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.
Turning off underlines on links
To remove the underlining from text links, use the text-decoration property, as follows:
a { text-decoration: none; }
To remove the underlining from links except when they're hovered over, use:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Giving links a button effect
You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:
a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
Adding background images to links
Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:
a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
Replacing link text with an image
What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.
First, put your link text within a span element in your markup:
<a href="home.html"><span>Home</span></a>
Then you can style the link as follows:
a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}
a span
{
display: none;
}
First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.
Here's how the above example looks:
INFO
Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.
Article Source : http://www.elated.com/articles/styling-links-with-css/
