Starting a Page with CSS

Let’s start with the first CSS declaration in almost any CSS style sheet:

html {
   margin: 0;
   padding: 0;
}

This removes any settings the browser uses. Have you ever noticed how there is often a 5-10 pixel margin at the top of the page…depending on the browser you are using? This CSS declaration removes any ‘pre-set’ margins.

Let’s take a look at the next CSS style.

body {
	background-color: #2f261f;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #fff;
	font-size: 14px;
        background-image: url(images/bk_top.jpg);
	background-repeat: repeat-x;
}

This style has a number of properties. Not all of these are necessary. At the minimum, I go with the first four properties. Using a background image is optional, but I want to cover it here because it can really ‘spice’ up a page.

Most of these property:value settings are self-explanatory. The background-color is the color ‘outside’ your page. Usually your page will take up a part of the browser window. The rest of it will be the background color.

The font-family provides a list of fonts. If the first font isn’t installed on the viewer’s computer, it will look for the next font, etc. Eventually it will resort to any serif font if none of the listed fonts are installed.

Color is the color of the text on the web page. And, font-size will be the default size for normal text (usually within paragraph tags).

Then we notice the final two properties: background-image and background-repeat. The background image is an image I want to show up behind the actual page area. The easiest way to explain this is to show it to you. Preview the image at the top of this post. The image is only at the top part of the page. The rest of the page is the background-color. That’s why the body style includes a background-image and a background-color. The background-color fills in outside the image area.

The background-repeat property says to only show this image across the top, repeating it if necessary to fill up the width of the browser window. If we didn’t have the background-repeat property, the image would tile the entire area of the browser window.

The last style we’ll look at is the following:

ul, li, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

This one is similar to the html style above. It removes any default settings for these tags. All of these tags are considered block tags, meaning there is designated space above and below these tags, also known as margins. This CSS style removes any designated space and allows me to eventually set up my own margins.

Now that we have the CSS styles set up to start a page, we’re ready to define the CSS styles to set up the page layout. We’ll take a look at that next time.