Приглашаем посетить

Styling the <body> Element

Styling the `<body>` Element

Now that the layout grid and images are finished, you can begin coding the page.

The first step is to force the contents of the page up against the edges of the browser window. To do this, you must set both margin and padding to 0.

You can set both font-size and font-family for all elements on the page by applying these properties to the <body> element using font: 90% arial, helvetica, sans-serif;.

Setting margin and padding on the <body> Element

Browsers use different methods to set their default indentation on the <body> element.

If padding: 0 is used, Opera will set the content against the edges of the browser window.

If margin: 0 is used, all other standards-compliant browsers will set the content against the edges of the browser window.

The only way to force all browsers to work the same way is to set both margin and padding to 0.

The background-color and color properties also must be set on the <body> element. You can use a background color of #387A9B and a color of #333 as shown in Listing 21.3. The results can be seen in Figure 21.3 .

Listing 21.3. CSS Code for Styling the `<body>` Element

body
{
    margin: 0;
    padding: 0;
    font: 90% arial, helvetica, sans-serif;
    background: #387A9B;
    color: #333;
}

Figure 21.3. Screenshot of the styled `<body>` element.

Table of Contents

Styling the <body> Element