# Division backgrounds

One of the difficulties of writing CSS scripts is that we cannot ‘see’ the different divisions we set up in HTML. Let’s see the latest version of our fan page:

Backgrounds ready Click on the image to go to the working page

We set up 11 divisions in this webpage but we cannot tell where they are because the color of all their backgrounds is either yellow or white.

## Separating the divisions

A way to ‘see’ the divisions is to temporarily set their backgrounds to different colors in the CSS file; we can remove these phony backgrounds when we finish writing the webpage.

/* classes are targeted as .class-name */
.yellow-bg {
background-color: rgb(251,202,60);
}

/* ids are targeted as #id */
#container {
background-color: white;
}

/* --- temporary backgrounds --- */

background-color: aqua;
}

#content {
background-color: yellow;
}

#title {
background-color: salmon;
}

#nav {
background-color: salmon;
}

#main {
background-color: gray;
}

#logo, #my_pic {
background-color: skyblue;
}

#my_text {
background-color: palegreen;
}


The result of setting the background of each division to a different color is:

backgrounds of divisions drawn in different colors Click on the image to go to the working page

## background drawing order

Since we have not specified any position or size for any division, the browser assumes that all of them are boxes as wide as the webpage and as tall as needed to fit their content; by default the browser draws adjacent divisions on top of each other, in a stack, and draws nested divisions in the nesting order that we set up in HTML:

• body
• #container
• #title
• #logo
• #content