Learn how to create your own website using HTML and CSS

Applying CSS to Our Site

Now that we have our template designed for our site, have linked it to our CSS file and have an index page with which to add content and talked a bit about how CSS works, lets add some style to our site. The first thing I like to do is eliminate all the default padding and margins so that I can control that myself. So how do we do that, do we have to write out each kind of element and set their properties for "padding" and "margin" to 0? No, luckily CSS understands some meta-characters that we can use to cover them all. The asterisk symbol is shorthand for "everything".

Add this to the top of your "styles.css" file.

Reload the page and you should notice the content get just a little bit closer to the edge of the browser window and all scrunch in a bit. The reason for doing this is that different browsers add space to elements differently. Some will use margins (space around the box) and some will use padding (space inside the box). By reseting this we can control what we want padding or margins added to and where.

Now Lets layout our basic site structure. We are going to make our web page 800 pixels wide and align it in the center of the page. We are also going to give the "body" surrounding the content a light blue color.

Colors are defined in HTML and CSS using "red, green, blue" (RGB) values. You can define this in a couple of different ways, there is a scale of 0 - 255, and a hexidecimal scale of 0 - F, which actually looks like this (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f). Use can use capitalized or lowercase letters. 0 means none of that color, and "f" means all of that color, all three RGB values set to "0" gives you black (no color), all three RGB values set to "f" gives you white (all color). You define hexidecimal colors beginning with the hash/pound (#) sign and then define the RGB values using either 3 or 6 values. Confused yet? Watch this!

Add the following to your CSS file

Save the page and reload it. We defined that we wanted the "body" element to have a background color that was almost fully saturated with red and green, and that was fully saturated with blue, giving us and almost white with a more blueish tint. We also set a different font with the property "font-family" setting it to "arial". This will cause the entire documents text to be displayed in this font unless otherwise defined.

Elements inherit style properties from the elements they are inside of, called there "parent" elements. Properties such as colors and sizes that are applied to a parent element will be used by their "child" elements.

Then we defines style rules for the element with an id of "mainWrapper". If you remember this is the element inside the body element that holds everything else. We told the browser that we want that element to be 800 pixels wide with a background color of white (RGB all set to "f"). If you don't set this background color here, all your content will inherit the light-blue from the body.

Now look at the margin. There are many ways to set values, I try to choose the method that takes the least typing as I'm sort of lazy. When defining margins or padding, you can specifically set the side of the box you want the style to apply to by following the word "margin" or "padding" by a dash (-) and which side of the box you want the value applied to.

Or you can use a shorthand method to set all values on one line by supplying the property of "margin" or "padding" with 1, 2 or 4 values. If you provide the margin or padding property with one value, that value will be used on all 4 sides. If you provide it with two values, the first value will apply to the top and bottom, and the second value will apply to the right and left. If you provide 4 values they will be applied in a clockwise direction starting from the top (top, right, bottom, left).

What we did above to the mainWrapper element was tell the browser that we wanted the top and bottom to have zero (0) margin and by setting the right and left values to auto, we told the browser to split the difference between the two sides, which as long as we specify the width of the element in question, will cause it to be centered in its parent. That is how you get a centered web page folks.

Now lets play with our header section. Lets give it a different background color and style the sites title a little bit.

Here we have added some padding inside our headerWrapper element, 5 pixels to the top,right and left and none to the bottom. This will push all our content away from the inner edges, except the bottom. We then add 25 pixels (px) of margin to the bottom of the element to push the content that follows it (in our case our "contentWrapper" element) down away from it and give it some space. We also gave it a 2 pixel solid bottom border width a blue-green color for a little extra punch.

Now Lets give the heading element some style just for the heck of it.

We give our site title heading a orangish color, define the font type as verdana with a backup of arial so it stands out a bit from the rest of the text, and then tell the browser that we want a variant of the font called small caps, which makes all the letters small capital letters except the ones we originally capitalized in the HTML content, which will be large capital letters. I think it looks sorta neat as long as it isn't overused.