The basic page template

The basic page template

Once you have created the template page, create a folder and name it something like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, create a new text document and call it: ‘myCSS.css’. Once created open that file and paste in this template CSS code 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;
}

Don’t let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.

In between the <body></body> tags you will need to insert this code:

<div id="navigation">

<h2>The Main navigation</h2>
</div>

<div id="centerDoc">

<h1>The Main Heading</h1>

<p>Go to the Web Designers Killer Handbook home page and grab the
   practice HTML page that we will used as the starting template for this
   tutorial. You can find it under the heading: 'To create the practice HTML
   page do the following:'.</p>

<p>Follow the instructions there and create your basic HTML page
   ... and do it now!</p></div>

And in between the <head> </head> 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">

With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started!

If you haven’t set the page up yet, please do so to make sure you have everything working thus far. Should you have any problems, go to the Forum and post your questions.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s