Selectors in action - step by step tutorial

Step 3 - styling the <body> element

3.1 Margin and padding

Some browsers have a default padding set on the <body> element, and others use a default margin. To force items to sit in the top left corner of the page, you must remove both margin and padding from the <body> using a simple type selector:

body
{
margin: 0;
padding: 0;
}

3.2 Font size

Leaving the font size at browser default size is the most accessible (and some would argue "best") method. However, for many web users default font sizes are too large. The following step is optional!

One method of reducing the overall font size is to set a font-size of 95% on the <body> element, which will reduce the overall font-size across the entire page by 5% - as it is inherited by all other elements below the <body>.

body
{
margin: 0;
padding: 0;
font-size: 95%;
}

3.3 Font-family

You can also set the font-family for the entire page. Be aware that some browsers do not properly inherit font-family. This may mean that table elements or form elements need to be styled with a font-family as well.
It is important to set a few font-family options so that the widest possible range of users sees your site in the same or similar font. If users do not have Georgia, they may have Times or Times New Roman. If all else fails, they should at least have a serif font as a last resort.

Any font family that has whitespace between words needs to be enclosed in quotation marks.

body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: georgia, times, "times new roman", serif;
}

3.4 color

Color and Background-color can be added into the body rule set:

body
{
margin: 0;
padding: 0;
font-size: 90%;
color: #000;
background-color: #fff;
}

View step 3 »

Go to Step 4 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org