Cascading Style Sheets Tutorial - Part 3
In part 2 of the tutorial we broke down the major sections of HTML on the page and established separation (of the sections) 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 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>
We define how the paragraphs and the headings will look in our CSS code:
p {
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", 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 an image for the bullets, you could leave it with no images and no bullets by just removing the attribute:
list-style-image: url(../images/arrowSmall.gif);
Or you could use on of the built in bullet options: 'disc', 'circle' and 'square'.
Next you should add to the HTML page an unordered list (<ul></ul>) in between the navigation DIV's just under the 'main navigation' heading:
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.htm">Page One</a></li>
<li><a href="cssTutorialPage2.htm">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%;
}
Bing-bang ... 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 for you all, 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. Please let me know how you felt about this article.
Thanks for reading and don’t be afraid to write me should you have questions!
Stefan Mischook
Top