CSS

Creating basic page template with CSS style sheet.
Previous Home Next

For this create a new text document and call it: ‘mywebpage.css’. Once created open that file and paste in this template CSS code that given below and then save it.

/* Generic Selectors */
body {
font-family: Georgia, 
"Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}

p {
width: 80%;
}
 
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
 
h1 {
font-family: Georgia, "Times New Roman"
, Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
 
h2 {
font-family: Georgia, "Times New Roman"
, Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
 
/**************** Pseudo classes ****************/
 
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
 
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
 
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
 
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
 
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
 
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}

a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/

#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
} 

#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}

 

We need to add some code to our HTML page. In between the tags you will need to insert code as given below-

<div id="navigation">
<h2>Main navigation</h2>
</div>
<div id="centerDoc">
<h1>Main Heading</h1>
<p>With CSS you define the colors and sizes in "styles"
. Then as you write your documents you 
refer to the styles.
Therefore: if you change a certain style it will change the look of your entire site.
 'To create the practice HTML  page do the following:'.</p> 
<p>Follow the instructions here and create your basic 
HTML page and do it now!</p></div>

And in between the tags you will need to insert this-

<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<link href="myCSS.css" rel=
"stylesheet" type="text/css"
>

Your web page will look like as below-

Previous Home Next

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: