{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

Styling Links with CSS Tutorials

CSS allows you to style links in different ways, including creating links that look like buttons and also using images as links.

When an HTML link is created, web browsers will automatically style the link with an underline. For example:

This is a text link.

Anchor <a> Tag and Anchor (a) Selector

In HTML, links are created using the <a> tag. In CSS, links are styled using the anchor (a) selector.

The syntax to create an HTML link is:

<a href="url">text link</a>

The syntax to style links is:

a { property:value; }

Any CSS property can be applied to links. For example, the following properties can be applied to links: text-decoration, color, font-size, font-weight, font-family, background-color, border, etc.

For example, the code example below shows you how to specify that the underline from links be removed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> a { text-decoration:none; } </style> <body> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. applied to it. </p> </body> </html>

The web page that the code example creates is here: CSS links Example.

Pseudo-classes make it possible to style links differently, depending on what state they are in.

There are four link states are:

Link State Description
a:link specifies a normal, unvisited link
a:visited specifies a link that the user has (visited) clicked on
a:hover specifies a link that the user is hovering over
a:active specifies a link at the moment it is clicked on

Styling only the anchor (a) selector, applies the styles to links regardless of what state the link is in. However, using a psuedo-class overrides any styles that are applied to the anchor (a) selector. For example, the code example below makes all links the color red, except for visited links, which become yellow with no underline:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> a { color:red; text-decoration:underline; } a:visited { color:yellow; text-decoration:none; } </style> <body> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. applied to it. </p> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. applied to it. </p> </body> </html>

The web page that the code example creates is here: CSS links Example.

There are some rules that must be followed when setting the styles for multiple link states.

  • a:hover must follow a:link and a:visited
  • a:active must follow a:hover

The code example below shows how to apply these styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> a:link { color:black; text-decoration:underline; } a:visited { color:red; text-decoration:none; } a:hover { color:blue; text-decoration:none; } a:active { color:yellow; background-color:blue; text-decoration:none; } </style> <body> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. </p> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. </p> <p> This is a <a href="http://freecssvideotutorials.com/" title="some title">text link</a>. </p> </body> </html>

The web page that the code example creates is here: CSS links Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends