Styling Links in CSS


Home | About Us | Contact

The links above are styled through CSS using a external style sheet this webpage explains how links can be styled using CSS

The CSS coding below sets the link on how it looks just by appearance. So by reading the code the text is blue with a verdana style on appearance.

a {
text-decoration: none;
color: Blue;
font-size: 100%;
font-weight: normal;
font-family: verdana, arial, helvetica, sans-serif;
}

The CSS coding below sets how the link will change once it has been clicked on to say it has been visited. So again reading this code explains that once a link has been visited it will change to RED. This is a good feature to have on a website to show visitors what pages have been visited.

a:visited {
text-decoration: none;
color: #FD0000;
}

The CSS below will add a line underneath when mouse is hovered over this will tell the user that this is a link. This can also be used to change the text colour aswell but just adding a line to this feature in CSS tells the user its a link.

a:hover {
text-decoration: underline;
color: Blue;