If you want something you've never had, you must be willing to do something you've never done!

Powered by Blogger.

Basic CSS Concepts: Part 2 0

Cerita Semalam Aaz | 11:52 AM | ,


The basic page template

Go to the Web Designers Killer Handbook 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 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.

Continue To Part 2 >>

0 Responses So Far:

Related Post

 
Back To Top