creating separate css file

It is preferable to put all the css related code and classes in a separate file, and include that file in the html document in which we want to apply properties of those class.

The following is code of a style sheet:

stylesheet.css

@charset "utf-8";
/* CSS Document */

.note
{
  font-family:Verdana, Geneva, sans-serif;
  color:#06C;
}

.text
{
  font-size:10px;	
}

p.myclass
{
  color:#F3F;
}

.myheading
{
font-family:Georgia, "Times New Roman", Times, serif;
color:#0000FF;
}

The first two classes in the above file are assigned unique IDs. When a css class is defined in this way, with a unique ID, the name of the class is prefixed with a “.” dot, e.g., .note or .text or the last class .myheading

When the class name is p.myclass, this means, the properties of this class will be applied to paragraph p tag, whose class property is set with value “myclass”.

In the following document, the above stylesheet is called using <link> by providing path to the stylesheet

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>

</head>
<body>

<h1 id="myhead1" class="myheading"> This is heading 1 </h1>
<h2 id="myhead2"> this is heading 2 </h2>
<h3 id="myhead3"> This is heading 3 </h3>

<p id="par1" class="note">
This is web engineering course, and we have started cascaded style sheets
</p>


<p id="par2" class="text">
This is second P tag. This is web engineering course, and we have started cascaded style sheets
</p>

<p id="par3" class="text note">
This is Third P tag. This is web engineering course, and we have started cascaded style sheets
</p>

<p id="par4" class="myclass">
This is Fourth 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 *