codescracker


css

CSS Links



« Previous Tutorial Next Tutorial »


You are free to style links from simple to interactive using CSS.

CSS Styling Link

You can style your link interactively using some of the property available in CSS such as color, font-family, background, etc.

CSS Set Color and Background Color of Links

Here is an example, shows how to set color of the link text and background color of the links using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a { color: white; background-color:red; }
	</style>
</head>
<body>

<p><b><a href="http://codescracker.com">This is a link</a></b></p>

</body>
</html>

Here is the sample output produced by the above CSS link example code:

css links

You can refer to CSS Pseudo-Classes tutorial to find the link states in detail.

CSS Links Example

Here is an example on CSS links:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a:link { color: blue; }
		a:visited { color: red; }
		a:hover { color: green; }
		a:active { color: #0000FF; }
	</style>
</head>
<body>

<p><b><a href="http://codescracker.com">This is a link</a></b></p>

</body>
</html>

Note - a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note - a:active MUST come after a:hover in the CSS definition in order to be effective.

Here is the sample output of the above CSS link example code:

css all link states

Here is the live demo output of the above CSS link example. To Watch the effect with your own, place the mouse cursor over the below link text, This is a link and then click to watch the effect:

CSS Link Text Decoration

You can also decorate link text using CSS text-decoration property. Here is an example on CSS link text decoration:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a:link { color: blue; text-decoration:none; }
		a:visited { color: red; }
		a:hover { color: green; text-decoration:underline; }
		a:active { color: #0000FF; }
	</style>
</head>
<body>

<p><b><a href="http://codescracker.com">This is a link</a></b></p>

</body>
</html>

Below is the sample output produced by the above link text decoration example code in CSS:

css link without underline

Here is the live demo output of the above CSS link text decoration example. To watch the effect with your own, then place the mouse over the link below (This is a link).

CSS Link Background Color

You can set background color of the link using CSS background-color property. Here is an example on CSS link background color:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a:link { color:white; background-color:green; }
		a:visited { background-color:red; }
		a:hover { background-color:red; }
		a:active { background-color:red; }
	</style>
</head>
<body>

<p><b><a href="http://codescracker.com">This is a link</a></b></p>

</body>
</html>

Below is the output produced by the above CSS link example code:

css link background color

Here is the live demo output of the above CSS link background color example code. To watch the effect with your own, then place the mouse over the below link (This is a link):

CSS Create Different Styles to Hyperlink

Look at the below example to understand the different-different styles that can be done using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a.one:link {color:blue;}
		a.one:visited {color:#0000ff;}
		a.one:hover {color:red;}
		a.two:link {color:blue;}
		a.two:visited {color:#0000ff;}
		a.two:hover {font-size:140%;}
		a.three:link {color:blue;}
		a.three:visited {color:#0000ff;}
		a.three:hover {background:green;}
		a.four:link {color:blue;}
		a.four:visited {color:#0000ff;}
		a.four:hover {font-family:monospace;}
		a.five:link {color:blue;text-decoration:none;}
		a.five:visited {color:#0000ff;text-decoration:none;}
		a.five:hover {text-decoration:underline;}
	</style>
</head>
<body>

<p><b><a class="one" href="http://codescracker.com">This link changes color</a></b></p>
<p><b><a class="two" href="http://codescracker.com">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://codescracker.com">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://codescracker.com">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://codescracker.com">This link changes text-decoration</a></b></p>

</body>
</html>

Here is the live demo output produced by the above CSS link example code that shows how to decorate links using CSS in different-different style. To watch the effects of all, place the mouse over the links below links:

CSS Create Link Boxes

Look at the following example to understand how to create link boxes:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Links Example</title>
	<style>
		a:link, a:visited { display: block; font-weight: bold; color: white;
				background-color: black; width: 140px; text-align: center;
				padding: 6px; text-decoration: none; }
		a:hover, a:active { background-color: red; color:white; }
	</style>
</head>
<body>

<a href="http://codescracker.com">This is a link</a>

</body>
</html>

Here is the live demo output produced by the above CSS links example that shows how to create link box using CSS. To watch it with your own, just place the mouse over the link given below (This is a link):


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test