CSS and the BODY

Styling the HTML body tag.

The HTML BODY tag has a set of attributes that you can set, such as color or the use of an image for your background. You can set global colors for your hypertext links (alink, vlink, and link). You can also set a global color for the text on your page. You can also set the margins for the page.

These choices are relatively boring compared to the capabilities you get with CSS. Not only are there more things you can tweak, you can also write Javascript that tweaks them on the fly.

We'll start by looking at the settings for the body tag in this page:

body#bodyObj {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 color: #003333;
 width: 800px;
 border: 1px solid #000000;
 background-color: #006699;
 }

The first thing you'll notice is that we've been able to set not only the color, but also the font family and size of the whole page. All elements in this page, such as the above headings have inherited the dark green color, and the san-serif font. While we've made a relatively unexciting choice of font, when we should decide to manipulate the style, our decisions will cascade into all of the tags on the page.

We've also set the width of the body to 800 px and surrounded it by a 1 pixel black border. It's important to understand, however, that the background-color is for the page itself rather than for the 800 pixel box described for the body. This box is actually transparent -- we made it white by setting the background attribute of a <DIV> tag inside it.

Font Control

So first, let's look at font control. Here's an example of changing the global font color by simply changing the color: parameter.

color: #006699 (blue text) color: #660000 (dark red text) color: #000000 (Black Text)

 

The following buttons manipulate the font-style and font-family tags, respectively. These changes are independent of color.Note that they are also independent of each other.

Bolder Text Fancy Font

 

Back to Normal sets things back to the defaults in our page.

Background Control

Clicking this link will set the body background-image property. Note that background-image for the BODY tag actually sets the Page background, while the border color we set builds a box around the stuff inside the body tag.

Here's a set of links which will change background image colors:

Blue Stripe Grey something else back to normal

The above links (styled to look like buttons using the "outset" border style) do their magic by setting the background-image property of the body style.