Tutorfordesign

The basic page template

Go to the Tutorfordesign home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: ‘To create the practice HTML page do the following:’ Follow the instructions there and create your basic HTML page.
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 Tutorfordesign 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!

Tuesday, March 19, 2013

Start Learning CSS Part 2

The basic page template

0 comments:

Blog Archive