Cascading Style Sheets Tutorial Part 3
Part 1 |
Part 2 |
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 in 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.
