ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

Display, Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

Styling Links with CSS

HTML anchor tag can be styled with any CSS property e.g. color, font-family, background, etc. A link has four different states — link, visited, active and hover. These four states of a link can be styled differently using pseudo-classes of anchor tag.

CSS pseudo-classes associated with anchor tag are:

a:link — Set styles for a normal or unvisited links that has no mouse pointer over it.

a:visited — Set styles for a link the user has visited but no mouse pointer on it.

a:hover — Set styles for a link when the user place the mouse pointer over it.

a:active — Set styles for a link that is being clicked, before releasing mouse button.

a:link {    /* unvisited link */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* visited link */
    color: #00FF00;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
	border-bottom:5px dashed;
	padding-bottom:5px;
}
a:active {    /* active link */
    color: #0000FF;
}

Note: The order of the pseudo classes should be the following: :link, :visited, :hover, :active, :focus in order for these to work properly.

Standard Link Styles

In all major web browsers, links on the web pages have underlines and use the browser's default link colors, the default link colors in web browsers like Firefox, Chrome are — blue for unvisited, purple for visited and red for the active link.

Last Updated: 25-July-2018