Scribd
Upload
26 views6 pages

Hyperlink Css

The document contains examples of using CSS to style links in different states such as unvisited, visited, on hover, and active. It demonstrates how to style links using properties like color, text-decoration, and background-color. It also shows how the hover, active, and visited states must be defined in a specific order to be effective. Finally, it shows how to apply different hover styles to links with different classes.

Uploaded by

Resa Zulfikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views6 pages

Hyperlink Css

The document contains examples of using CSS to style links in different states such as unvisited, visited, on hover, and active. It demonstrates how to style links using properties like color, text-decoration, and background-color. It also shows how the hover, active, and visited states must be defined in a specific order to be effective. Finally, it shows how to apply different hover styles to links with different classes.

Uploaded by

Resa Zulfikar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

/* selected link */

a:active {

color: blue;

</style>

</head>

<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>


<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

text-decoration: none;

a:visited {

text-decoration: none;

a:hover {

text-decoration: underline;

a:active {

text-decoration: underline;

</style>

</head>
<body>

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

background-color: yellow;

a:visited {

background-color: cyan;

a:hover {

background-color: lightgreen;

a:active {

background-color: hotpink;
}

</style>

</head>

<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

a:link, a:visited {

background-color: #f44336;

color: white;

padding: 14px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

a:hover, a:active {
background-color: red;

</style>

</head>

<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>

<a href="default.asp" target="_blank">This is a link</a>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

</style>

</head>

<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>

<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>

<p><b><a class="three" href="default.asp" target="_blank">This link changes background-


color</a></b></p>

<p><b><a class="four" href="default.asp" target="_blank">This link changes font-


family</a></b></p>

<p><b><a class="five" href="default.asp" target="_blank">This link changes text-


decoration</a></b></p>

</body>

</html>

You might also like