CSS Tutorial - Part 1

Cascading Style Sheets Tutorial - Part 1

Part 1 | Part 2 | Part 3

As promised, we will be taking the next step towards total nerd glory with this first of a three-part article on creating a pure CSS web page.

Not just CSS styling, but CSS positioning too, that means no tables required! Once completed you will be creating pages in sophisticated ways that 99% of web designers don't even consider!!

That means you will be able to put out pages with much less work, that load much faster, and will be easy to update and print! Needless to say you will have an advantage over the competition. BTW, all this is 100% standards compliant and should work in 99% of browsers being used today.

CSS Template Layout - Part 1 of 3

Having been asked by several readers, I've decided to create this easy to understand tutorial (I hope!) on creating web pages with CSS. I will not be able to expose to you everything there is about CSS in this tutorial, but you will be able to create a nice looking CSS based page.

After completing this tutorial you should have enough to explore CSS and web page design even further.

Tags used in this CSS based layout:

Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.

The tags we will use to layout the content:

1. <h.> The Heading tags which range from '<h1></h1>' to '<h6></h6>', are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag and the least important in a <h6> tag.

An example of a heading for this article: 

<h1>  CSS Template Layout  </h1>

This tells the browsers and the search engines too, that this page is primarily about: 'CSS Template Layout'

All browsers have a default size (for each <h.> tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially <h1>) because they come out too big. But never fear CSS is here, and we will use CSS to make the text sizes more to our liking.

2. <p> The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what they call a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each <p> tag pair. You see it work in the examples coming up.

3. <ul> and <ol> List tags will 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'. The other list tag mentioned (<ol>) is the 'ordered list tag' and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code examples to follow.

4. <div> We all know what the <div> tag is about since we all read the previous article, right? We will use div's to create containers for parts of our page. One div will be used to 'hold' our navigational menu and another div to 'hold' the main page.

5. <a href> The most important tag in HTML: the 'link tag' or the 'hyperlink tag'. This makes text 'hyper' so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script).

6. <img> This is the 'image tag', allows you to link to images so that they show up in our pages. In HTML images are not embedded into the actual page, instead the image tag (<img>) only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page.

That covers the HTML tags we will use in our layout! No need for table tags, <br> tags and nasty <font> tags.

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 ****************/ 

    :link { 

    color: #00CC00; 

    text-decoration: underline; 

    font-weight: bold; 

    } 


    li :link { 

    color: #00CC00; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    
	:visited { 

    color: #00CC00;

    text-decoration: underline; 

    font-weight: bold; 

    } 


    li :visited { 

    color: #00CC00; 

    text-decoration: none; 

    font-weight: bold; 

    } 

   
    :hover {

    color: rgb(0, 96, 255); 

    padding-bottom: 5px; 

    font-weight: bold;

    text-decoration: underline; 

    } 

    li :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; 

    } 


   :active { 

    color: rgb(255, 0, 102); 

    font-weight: bold; 

    } 

   
    /************************* ID's *************************/ 

    #navigation { 

    position: absolute;

    z-index: 10; 

    width: 210px; 

    height: 600px; 

    margin: 0; 

    margin-top: 50px; 

    border-right: 1px solid #C6EC8C; 

    font-weight: normal; 

    } 

   
    #centerDoc { 

    position: absolute; 

    z-index: 15; 

    padding: 0 0 20px 235px; /*top right bottom left*/

    margin-top: 50px; 

    }

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:'. 

    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: 

 
    <head> 

    <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">
 
      </head>

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: PART 2

Top
© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/Tutorials/CSS_tutorial/index.php:338 Stack trace: #0 {main} thrown in /home/killersi/public_html/Tutorials/CSS_tutorial/index.php on line 338