Friday 20 July 2012

How to Add different colors to visited/unvisited links in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="http://collegeprojectandtests.blogspot.in/" 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>

Friday 20 July 2012 by Unknown · 0

How to Set the boldness of the font in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>

<body>
<p class="normal">paragraph.</p>
<p class="light">paragraph.</p>
<p class="thick">paragraph.</p>
<p class="thicker">paragraph.</p>
</body>

</html>

by Unknown · 0

How to Set the variant of the font in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>

<body>
<p class="normal">My name is Adolf Hitler.</p>
<p class="small">My name is Adolf Hitler.</p>
</body>

</html>

by Unknown · 0

How to Set the style of the font in css


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">This is a normal.</p>
<p class="italic">This is  italic.</p>
<p class="oblique">This is oblique.</p>
</body>

</html>

by Unknown · 0

How to Set the size of the font in percent and em using css


<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

</body>
</html>

by Unknown · 0