Styling the html and body Elements

One of the most common ways to begin a layout in HTML is this:

<html>
  <head>...</head>
  <body>
    <div id="wrapper">
      <div id="container">
        ...
      </div>
    </div>
  </body>
</html>

That’s the ol’ double-wrapped div layout technique. But, since we already have the html and body elements, the div elements might be redundant in a lot of situations. So in order find out if CSS styles can be applied to the html and body elements just like our hard-working wrappers, I tested a range of CSS properties in FireFox 3, Safari 3.2, Opera 9.6, and Internet Explorer 6, 7, and 8. Here’s what I found.

You can add padding to the html and body elements and it works in all browsers tested. However, borders are a different story. While you can add a border to the html element in all browsers tested, IE6 and 7 only allow a solid border. Also, IE6 extends the border around the whole viewport, regardless of how much content is visible, even to the right hand side of the scroll bar.

Adding a margin to the html element works in all browsers tested except IE6, which ignores it. A background color on either the html or body elements will cover the whole viewport, regardless of margins.

One quirk I found was that if you have a background image on the html element as well as a top margin, Safari and IE7 will ignore the margin and display the background starting from the top left corner of the viewport. Firefox Opera and IE8 will display the background image inside the margin area just like normal elements. All browsers respect margins on the body element and place background images correctly.

If you try some crazy CSS like absolutely positioning the html element, you’ll find it actually works in Opera, and IE7 and 8. However, Firefox and IE6 will ignore it, and Safari will be extremely confused and display a broken mess.

So what does work? Adding a background image to the html and body elements works fine, and you can use it in place of multiple background images that only Safari currently supports. One of the solutions in the SitePoint book, The CSS Anthology uses this technique.

You’ll be happy to note that centering a single fixed width column is a snap:

html {
  background-color: #333;
}
body {
  background-color: #fff;
  width: 750px;
  margin: 0 auto;
}

The above code will work flawlessly in all the tested browsers.

There’s one big gotcha though: if you need to use absolute or relative positioning for elements inside the body element. I’d assumed that since all elements obtain a positioning context from the body element by default, if I centered the body element the default positioning context should adjust accordingly. I was wrong! The default positioning context remains fixed to the viewport; you have to add position:relative; to the body style to create a new positioning context:

body {
  position: relative;
  background-color: #fff;
  width: 750px;
  margin: 0 auto;
}

Refreshingly, that’s consistent across all tested browsers.

Frequently Asked Questions on Styling HTML and Body Elements

How can I change the background color of my HTML page using CSS?

Changing the background color of your HTML page using CSS is quite simple. You can use the “background-color” property in your CSS file or within a style tag in your HTML file. Here’s an example:

body {
background-color: #f0f0f0;
}
In this example, “#f0f0f0” is the color code for a light gray color. You can replace it with any color code of your choice.

How can I style multiple HTML elements at once?

CSS allows you to style multiple HTML elements at once by grouping selectors. For instance, if you want to apply the same style to h1, h2, and p elements, you can group them like this:

h1, h2, p {
color: blue;
}
In this example, the text color for h1, h2, and p elements will be blue.

How can I apply a CSS style to a specific HTML element?

To apply a CSS style to a specific HTML element, you can use an id or class selector. An id is unique to a single element, while a class can be applied to multiple elements. Here’s an example:

#myId {
color: red;
}

.myClass {
color: green;
}
In this example, the element with id “myId” will have red text, and all elements with class “myClass” will have green text.

How can I center text in an HTML element using CSS?

To center text in an HTML element, you can use the “text-align” property in CSS. Here’s an example:

p {
text-align: center;
}
In this example, the text within all p elements will be centered.

How can I change the font size of text in an HTML element using CSS?

To change the font size of text in an HTML element, you can use the “font-size” property in CSS. Here’s an example:

p {
font-size: 20px;
}
In this example, the text within all p elements will have a font size of 20 pixels.

How can I change the font family of text in an HTML element using CSS?

To change the font family of text in an HTML element, you can use the “font-family” property in CSS. Here’s an example:

p {
font-family: Arial, sans-serif;
}
In this example, the text within all p elements will be displayed in the Arial font, or a generic sans-serif font if Arial is not available.

How can I add a border to an HTML element using CSS?

To add a border to an HTML element, you can use the “border” property in CSS. Here’s an example:

div {
border: 1px solid black;
}
In this example, all div elements will have a 1-pixel solid black border.

How can I add padding to an HTML element using CSS?

To add padding to an HTML element, you can use the “padding” property in CSS. Here’s an example:

div {
padding: 10px;
}
In this example, all div elements will have 10 pixels of padding on all sides.

How can I add a margin to an HTML element using CSS?

To add a margin to an HTML element, you can use the “margin” property in CSS. Here’s an example:

div {
margin: 20px;
}
In this example, all div elements will have a 20-pixel margin on all sides.

How can I style a link in CSS?

To style a link in CSS, you can use the “a” selector along with various properties such as “color”, “text-decoration”, and “font-weight”. Here’s an example:

a {
color: red;
text-decoration: none;
font-weight: bold;
}
In this example, all links will be red, have no underline, and be bold.