Lesson 5: CSS Tutorial

CSS Tutorial: Part 3

In Part 2 of the tutorial we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID’s attached to them: 

<div id="navigation"> ... </div>
<div id="centerDoc"> ... </div>

Using DIV’s (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other, but consider that CSS is the ‘official’ method to position page elements and tables should only be used to hold tabular data. On the other hand, there are simply times when using tables is much easier and CSS just doesn’t cut it. With our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.

Now that we have that covered, everything gets really easy from here. We’ve established our main document and the major sections are in place, all we need to do is add our text and images.

Breaking down the page:

This page is simple, we have just a single heading: 

<h1>The Main Heading</h1>

And a single paragraph: 

<p>
    Go to the Web Designer's 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>


We define how the paragraphs and the headings will look in our CSS code: 

p { 
	width: 80%; 
} 
h1 { 
	font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	color: #000000; 
}

This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit spot.

The only thing missing from the page is the actual navigation. The best and easiest way to do this is by using list (<li>) tags. That makes sense, since navigational menus are essentially a list of pages.

We styled the list item tags with this CSS: 

li { 
	list-style-type: none; 
	line-height: 150%; 
	list-style-image: url(../images/arrowSmall.gif); 
}

The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more ‘breathing room’). You don’t have to have images for the bullets, you could leave it without images and without bullets by just removing the attribute: 

list-style-image: url(../images/arrowSmall.gif);

Or you could use one of the built-in bullet options: ‘disc’, ‘circle’ and ‘square’.

Next you should add an unordered list (<ul></ul>) in between the navigation DIV’s just under the ‘main navigation’ heading to the HTML page:

<h2>The Main Navigation</h2> 
<ul>
	<li><a href="cssTutorialPage1.php">Page One</a></li> 
	<li><a href="cssTutorialPage2.php">Page Two</a></li> 
</ul>

To make things easier (for the purpose of the article), change the CSS affecting the list item tags (<li>) so that we use a built-in bullet: 

li { 
	list-style-type: disc; 
	line-height: 150%; 
}

Now we have the navigation!

That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page while using very few types of HTML tags. At this time there isn’t much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all!

I hope the CSS tutorial was useful to you, it may have been a little hard to get your head wrapped around this subject at first, but in time you will see that your efforts will pay off.

Top of Page