July 23, 2017
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>