Creating A Basic CSS Webpage (Part 5)

Hey

We are moving on. In the last tutorial we got both of the left and right content div's set up. At the moment it doesn't look very pretty, so we are going to spruce it up a bit with some font styling. This ranges from the very simple, to the very complex. I'm going to make it as a simple as possible. This part of CSS isn't my favourite so I am going to make it as easy to do and as simple as possible.

Step 1) This best to to define a font styling is at the "very top". This means that you define one style for the whole document and then change it as necessary. This is using the inherit properties that are present within CSS. There fore to start we will use the body style and define some values. Like so:

body {
font-family:Tahoma, sans-serf;
font-size: medium;
text-align: left;
}

Notice that it doesn't have the hash (#) sign in front, this is a very special type of style that is linked to the html tags. For example anything that is within the body html tags will have that style applied.

The font family is the type of font that is going to be applied, in this case Tahoma and then any sans-serif font if Tahoma is not installed, the result of this means that it will not have any curly bits on the ups and downs to a font. You can name as many as you want, but try to keep them within one style.

Font-size and text-align are pretty self explanatory, these are used for the aligning of the fonts and the sizes. For more detailed information look here and here.

Step 2) Everything looks that same at the moment. The header text that goes inside the header div (add some if you haven't) needs to stand out. Its very simple, all you have to do is fiddle about with the CSS styles and add them to the existing styles like so.

#header {
width:700px;
height: 200px;
background:#808080;
margin-bottom:10px;
font-size: 200%;
text-align: center;
padding-top: 20px;
}

This makes some nice big text.

Step 3) If you ever want to off set some text from the edges of the div you need to use the padding option. Its very simple to use but involves a bit of math. All you have to do is use the padding syntax (padding: 5px 10px 5px 10px;) but then minus the width numbers (10px and 10px, remember you go around in a box). Then you take away this total from the width of your original box. It was 500px (for the left) it is now 480px. You have to do this to stop the divs being pushes out and ruining your layout.

Hopefully this should have helped, i'm going to do a little round up soon for what we have learned. If you are stuck please leave a comment.