Cascaded Style Sheets

Cascaded Style Sheets are used to set the layout of html objects. Various design related properties are grouped in css “classes”. There are various methods to define a class.

If a class name is same to an html object, then the properties defined in the class are automatically applied to all the html objects with the same name.

Example:
In the following example, the design related properties are grouped into three css classes.  The first class is named as P, representing paragraph tag. The properties defined in P class will be automatically applied on all the P tags appearing in the document. Similarly, the properties defined in h1, h2, h3 will be applied on all the headings h1, h2, and h3. Finally, the properties defined in body will be applied to the contents present in the <body></body> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
p
{
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
  color:#900;
  
}

h1, h2, h3
{
  color:#060;
}


body
{
  background-color:#FF9;
 
}
</style>


</head>
<body>

<h1> This is heading 1 </h1>
<h2> this is heading 2 </h2>
<h3> This is heading 3 </h3>

<p>
This is web engineering course, and we have started cascaded style sheets
</p>


<p>
This is second P tag. This is web engineering course, and we have started cascaded style sheets
</p>

</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *