CSS Pseudo-classes
How to add different colors to a hyperlink in a document.
<html> <head>
<style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style>
</head>
<body>
<p><b><a href="home.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:This is text.!</p> <p><b>Note:</b> a:This is paragraph.!</p>
</body> </html>
How to add other styles to hyperlinks.
<html> <head> <style type="text/css"> 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> <p>the links to see them change layout.</p>
<p><b><a class="text" href="text.asp" target="_blank">This link changes color</a></b></p> <p><b><a class="text_1" href="text.asp" target="_blank">This link changes font-size</a></b></p> <p><b><a class="text_2" href="text.asp" target="_blank">This link changes background-color</a></b></p> <p><b><a class="text_3" href="text.asp" target="_blank">This link changes font-family</a></b></p> <p><b><a class="text_4" href="text.asp" target="_blank">This link changes text-decoration</a></b></p> </body>
</html>
How to sets any <em> elements in first child <p> elements to bold.
<!DOCTYPE HTML PUBLIC "-//computereducationworld// HTML Transitional//EN" http://computereducationworld/TR/html4> <html> <head> <style type="text/css"> p > em:first-child { font-weight:bold } </style> </head>
<body> <p>I am a <em>strong</em> man. am i man<em>strong</em> </p> <p>I am a <em>strong</em> man. I am girl <em>strong</em> </p> </body></html>