<!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>

<!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>

<!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>

<!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>

<!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>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.

</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
</head>

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

</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font</h1>
<p class="serif">This is shown in the Times New Roman font.</p>
<p class="sansserif">This is shown in the Arial font.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="your logo.gif" alt="name" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="your logo.gif" alt="name" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="your logo.gif" alt="name" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>

<p>
some text.some text.some text.
some text.some text.some text.
some text.some text.some text.
some text.some text.some text.
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is  text. This is  text.
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>Default writing direction.</div>
<div class="ex1">Right-to-left direction.</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
standard line-height.<br />
standard line-height.<br />

</p>

<p class="small">
smaller line-height.<br />
smaller line-height.<br />
smaller line-height.<br />
smaller line-height.<br />
</p>

<p class="big">
bigger line-height.<br />
bigger line-height.<br />
bigger line-height.<br />
bigger line-height.<br />
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>

<p>Ajith Kumar (born 1 May 1971) is an Indian film actor who works mainly in Tamil cinema. He began his career as a supporting actor in a Telugu film before gaining critical recognition in the Tamil thriller Aasai (1995).[2] A succession of high-grossing films followed where Ajith was usually depicted as a romantic hero, with Kadhal Kottai (1996), Aval Varuvala (1998), Kadhal Mannan (1998) and Unnai Thedi (1999) being the most notable.'</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">some text.</p>
<p class="lowercase">some text.</p>
<p class="capitalize">some text.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>

<body>
<p>Link to: <a href="collegeprojectandtests.blogspot.com">Web tutorial</a></p>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">june, 2009</p>
<p class="main">Cruise was born in Syracuse, New York, the son of Mary Lee (née Pfeiffer), a special education teacher, and Thomas Cruise Mapother III (died 1984),[6] an electrical engineer.[7] Cruise has three sisters, Lee Anne, Marian, and Cass'</p>

</body>

</html>