CSS Tutorial Part 2 [ Layout a Page Part 2 ] 0

Layout a Page with CSS: Part 2

Like HTML and programming certain text in certain places have special meaning that tells the system to do something particular. In this case whenever you have a # symbol in front of a name of a CSS selector we are saying that this selector is a special type of selector called an ‘ID’ selector. What is so special about an ID selector? That type of selector can only be applied to one element in the HTML page. Sounds familiar?

So those of you not asleep at the computer, now see that we have a CSS ID selector for each of our HTML divs that have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’ , you got it? Whatever CSS rules/styles we choose to code into our ID selector will change what appears inside the corresponding div. So for the div with the id of: ‘navigation’ we have these CSS rules:

#navigation {
   position: absolute;
   width: 210px;
   height: 600px;
   margin: 0;
   margin-top: 0px;
   border-right: 1px solid #C6EC8C;
   font-weight: normal;
}

Notice at the bottom we say all text will have a font-weight of ‘normal’:

font-weight: normal;

We could just as easily have said that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:

font-weight: bold;

But I digress, I already go into detail about CSS in a my previous article on CSS. This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work.

In our page the navigation div is sitting on the left and it has a border … why? It has a nice light green 1 pixel border because I set this in my CSS:

border-right: 1px solid #C6EC8C;

Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks.

Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector:

position: absolute;

This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now.

The real magic in this is the CSS code for centerDoc:

#centerDoc {
   position: absolute;
   padding: 0 0 20px 0; /*top right bottom left*/
   margin-top: 50px;
   margin-left: 235x;
}

The line :

padding: 0 0 20px 0; /*top right bottom left*/

Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.

Let’s back up here a second. We just used something called ‘padding’ and it is what it sounds like: Space that is wrapped around our element (tag).

CSS has this feature and concept of a box model that essentially is a box that wraps around HTML elements. This box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so:

content -> padding -> border -> margin

So in our case anything in between our <div> tags is the ‘content’. Right after that comes the padding. Then there is a border and finally a margin. Margin and padding may seem like the same thing but if you think about it, you can see how being able to control the space before the border(padding) and after the border (margins) can really effect your layouts.

In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order that which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:

margin-top: 50px;

And for the navigation div I set it to:

margin-top: 0px;

This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div. I would suggest that you move the position of the navigation div under the center doc div in the HTML just to see if it changes anything, you will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used. Another thing to try is to play with the CSS values and see what happens, change the padding, change the margins etc .

Let’s finish this discussion of CSS in Part 3.

1. There is more HTML that appears on top of the first <body> tag that is very important to the page but does not actually directly have anything to do with what appears in the page (from the users perspective) so I won’t discuss it in this article.

Continue to Part 3 >>