Geoff Hankerson

In our last installment, we started out with good clean semantic and valid xhtml. This sets us up nicely to get started with CSS. To day we will cover these CSS topics:

• Linking to a stylesheet
• Setting the default font size
• Centering the design in the browser window
• Using a background image

Let's get started. Last time the header area of out html document looked like this:

Now we add a link to our stylesheet right after the title element:

This just tells us that we are linking to a file called style.css in a folder called css. Later we will a print stylesheet as well that will format the page for printing.

Next we will edit the style.css file directly. We want to set up the default font size. Here's how:

Why 62.5% for a font size? Well modern browsers have a default font size of 16 pixels. so 62.5% multiplied by 16 is 10. That gives us a nice round number as a base size. By the way the unit of measurement we can now use is called an em - the space once character fills up and in this case we set it to 10 pixels. I also used a teal background color to set the background apart from the content. I'm not sold on this color yet but it's the best I've found so far. I am specifying Courier fonts to give it that typewriter look.

Next we want to center the design on the page. To do this we simply use the 2 CSS properties: width and margin. I've attached a tiff file to this post to allow you to download the base image file I am using for the mockup (stipped.tiff). One of the first things to determine in the design is - how wide is it? We can use Photoshop or another image editor to measure. In this case the width is 791px. We can use a left and right margin value of auto to assure there is an equal margin on the left and right sides no matter what he width of the browser window. So we will apply these styles to the pageContainer div.

Now for the background image. We need to slice off the top part off of the mockup image (stripped.tiff below) for a background that we will use on the pageContainer div. If you are familiar with Phohoshop's slice tool, use that. You can just crop the image though. In this case crop it to a width of 791px and height of about 35px. Then save it as banner.png or banner.gif - if this is too much hassle, I have attached a copy of mine below. Now since the banner.png image is 35px high, we need to give the pageContainer div a top padding of equal proportion or we won't see the background image. Then we can specify the bacground image. The CSS for pageContainer now looks like this

For the background on pageContainer we are specifying the background color as white, the background image as banner.png, the background image position as left and top ( which could also be written as 0 0). We also declare that this background image should not repeat.

font-size: 1.2em; sets the font size for pageContainer and its descendants elements to 12 pixels.

So far your page should look like this in a browser (this image is reduced to 50%).

Next time we will look at making the left and right columns with floats