Generic Stylesheets for Basic Page Template

Posted on 25th Feb, 2008 in CSS Layouts, Popular Posts


Advanced CSS help you to create wonders by reducing the number of HTML tags that are used in the page.

Following are six tags required to layout the content:

  • <h> The heading tags range from ‘<h1></h1>’ to ‘<h6></h6>’ are used to mark/tag headlines in the pages. The most important headline, therefore, remains wrapped in a <h1> tag and the least important remains wrapped in <h6> tag.

An example of the heading:


<h1>CSS Template Layout</h1>

This tells the browser and search engines that this page is primarily describing “CSS Template Layout”
All browsers have a default size (for each <h> tag) as to how it renders text when placed between the tags. Most of these defaults remain unusable (especially <h1>) because they come out too big. However, you can use the CSS to make the text sizes more to the liking.

  • <p> The Paragraph tag is used to mark parts of pages as being “paragraphs”. Paragraph tags are called ‘block element'; which means that it can act like a block where a space is automatically inserted before and after each <p> tag pair.
  • <ul> and <ol> are list tags that are used to create our menus. The tag <ul> is the ‘un-ordered list tag’ that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term ‘un-ordered’ is used. The other list tag mentioned (<ol>) is the ‘ordered list tag’, which creates a list that, instead of bullets, the list elements are marked with numbers or letters.
  • <div> We are all familiar with this tag, in CSS. This div’s tag is used to create containers for parts of our web page. One div will be used to ‘hold’ our navigational menu and another div to ‘hold’ the main page.
  • <a href=> this is one of the most important tags in HTML: the ‘link tag’ or the ‘hyperlink tag’. This tag makes the text ‘hyper’ so that when we click on it, we can load another page or activate/call some JavaScript (otherwise known as ECMA script).
  • <img> this is one of the most important image tags, that allow you to link to images so that they can show up in the web pages. In HTML images are not usually embedded into the actual age but instead the image tag (<img>) only points to where the image is and the web browser will attempt to load that image when a surfer loads your HTML page.

This covers the HTML tags that we will use in our layout. You do not need to use any table tags, nasty <font> tags and <br> tags.

Basics of basic page template

Here are few steps to show you how to create your basic HTML page.

Once you have already created a template page, create a folder and impart a name to it like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, try to create a new text document and call it: ‘myCSS.css’. Once it is 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: bold;
    color: #000000;
    border-bottom: 1px solid #C6EC8C
}

When it comes to Pseudo classes, following are the codes:


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-0decoration: 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;
}

When it comes to IDs, following are the codes:


#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 50px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}
#container {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235px;
}

However, to finish this code successfully, one last thing that needs to be done is adding some codes to the HTML pages.

In between the <body></body> tags, you will need to insert these codes:


<div id="navigation">
    <h2>The main navigation</h2>
</div>
<div id="container">
    <h1>The Main heading</h1>
    <p>You can best create the basic HTML page by following these instructions:</p>
</div>

And in between the <head></head> tags you will require to insert the following:


<title>First CSS Tutorial</title>
<meta http-equiv= "Content-Type" content= "text/html">
<link href= "mycss.css" rel="stylesheet" type="text/css">

With these coding on place, you can start styling your page.