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>
assigning style to html object using id property
assigning multiple css classes to an object
fixed layout example
About Author
Osman Khalid
http://osman.pakproject.com