CASCADING STYLE SHEETS TUTORIAL PART 3 OF 3
Written by jon on 9:25 AMIn 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:
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.
That said, 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:
The Main Heading
And a single paragraph:
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!
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
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 (
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:
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 (
The Main navigation
- Page One
- Page Two
To make things easier (for the purpose of the article), change the CSS affecting the list item tags (
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!
Video Tutorial on CSS for Page Layout:
I've created a quick video that talks about page layout in CSS. I talk about some ideas that will make your life a lot easier when it comes to building pages with CSS.
CSS for Page Layout
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.
| Posted in »
0 comments: Responses to “ CASCADING STYLE SHEETS TUTORIAL PART 3 OF 3 ”