Styling the body Element

Styling the `<body>` Element

Some browsers use margins and others use padding on the <body> element to indent content from the edges of the browser window. Because this site header sits against the top edge of the browser window, you will need to set both margins and padding to 0.

Theoretically, you should be able to apply auto margins to the left and right of a container to center it on the page. However, some browsers won't center the container using this method because they ignore the auto margins. This problem can be overcome by adding two simple declarations.

The first declaration, text-align: center, is applied to the <body> element. The second declaration, text-align: left, is added to the container rule set (see "Styling the Container" later in this lesson).

A background-color and color must also be set on the <body> element. In this case, you can use a background color of #BOBFC2 and a color of #444 as shown in Listing 18.3. The results can be seen in Figure 18.1.

Listing 18.3. CSS Code for Styling the Body

body {     margin: 0;     padding: 0;     text-align: center;     background: #B0BFC2;     color: #444; }

Figure 18.1. Screenshot of styled `<body>`.