CSS - Links

Links are used to navigate from one webpage to other with a single click. We can use CSS properties to style links in various ways.

CSS Links Example

We can create a link in webpage using <a> tag. With CSS we can style this to built text link, button link and image link as shown below.

Table of Contents

States of Link

A link in a webpage exist in various states, and these states of link can be styled using pseudo-classes in CSS. Following are common states of link.

• Link: Represents unvisited links. This state of links can be styled with :link pseudo class. (This is default state for anchor tag).

• Visited: Represents the links that are already visited (present in browser’s history). This state of links can be styled with :visited pseudo class.

• Hover: Represents the state when user hover’s the mouse pointer over link. This state of links can be styled with :hover pseudo class.

• Active: Represents the state when user clicks the link. This state of links can be styled with :active pseudo class.

Default Styles of Links

Following are default styles applied to a link in webpage. You can modify this style using CSS.

• All the links will be underlined. You can remove this by setting text-decoration property to ‘none’.

• All the unvisited links will be in blue color and visited links will be purple. You can use color property to modify this

• The mouse pointer changes to a little hand icon when you hover over a link. You can use cursor property to modify this.

• Hovered links will be underlined and active links are styled in red.

CSS Text Link

A text content when clicked will navigate to a different webpage or a section of same page is called text link. Following example show how to make a text link.

Example

Styling States of Link

As mentioned above in this example we have used pseudo-classes to style different states of a link.

Example

CSS Button Links

In CSS we can styles links in such a way that it looks like a clickable button. Following example shows this.

Example

CSS Image Links

We can also attach links on images displayed in webpage. Following example shows this.

Example