Cascading style sheets are of recent origin in HTML.Here instead of using inline choices for various elements/statements in single document or in multiple documents, a STYLE information is incorporated to offer easy control over all design elements in a site.Hence if one wants to change for example color of text, one correction in the style element shall control the whole site.Otherwise one has to modify the statement in every document.This practice is recommended now by w3.org.

Cascading Style Sheets are specified in three different ways

1.Inline style

2.Embedded style

3.Link style

Examples::

INLINE

1.<b style="color:"#0000ff";">I am Fine</b>This will display 'I am Fine' in bold letters and in blue color.

EMBED

2.Embedded style is document specific.

<style type="text/css" >

Your style information

</style>

selector{property:value;...} i.e

h3{color:"#ff0000";} This will display all 'h3' elements in Red.

LINK

3.The linked style is a separate file and can be used for multiple documents by html link commands.

h3{

color : "#ff0000";

text-decoration: line-through;

}

Link element usage within 'head' tag::<href="jaiiq.css" and link rel="stylesheet" type="text/css">

CLASS

When we want different elements to share a common format, we can use a "class" definition.

<h3 class="display"</h3> <Style>="text/css; <style/>

.display {color:"#0000ff";text-decoration:none; } </style>

Here the selector shall begin with a(.) period.

ID

Where as "class" attribute is used for elements sharing common functions, we can define "ID" attribute for specific elements. <style>

#mainhead {color;"#0000ff";text-decoration:italic;} </style>

DIV & SPAN

div and span elements are exclusively used as css containers.

DIV { background-color: black; color:red; font-weight:bold; }

SPAN { background-color: royalblue; color:white; } <style>

<SPAN>How about You?</SPAN>:

Sample Css: margin-left:0.5in;margin-right:0.5in;margin-top:0.10in;

h1 font-family:verdana,helvetica,arial,san-serif;font-size:18pt;font-style:normal;text-align:left;background-color:blue;

h2 font-family:verdana'font-size:14pt;text-align:right;

p font-family:garamond;font-size:12pt;line-height:11pt;text-align:center;margin:10% 35% 10% 35% letter-spacing:.1em

a text-decoration:none;font-weight:bold;

p.left or p.right are used with 'class' attribute <p class="right" or "left">

td font-family:tahoma,arial;font-size:12pt;width:20 %;

hr color:red;height:16;

hr.blue color:blue;height:8;

Hope this introduces CSS incorporation in HTML documents.