Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

180 CHAPTER 4 Getting started with CSS3

#div3 {

background-color: lightpink;

}

#div4 {

background-color: orange;

}

#div5 {

background-color: lightblue;

}

#div6 {

background-color: lightgray;

}

In the style rules, the <p> element margin is set to 0 pixels to keep the paragraph from

inserting lots of space. Each <div> element background color is set to help differentiate

each element. If you display this page in a browser, you will see something that looks like

Figure 4-12.

FIGURE 4-12 he <T div> elements rendering below one another

The default behavior of the <div> element is such that it consumes the entire width of the

screen, which forces the next <div> element to render on the next line. The borders touch

one another, and the text is very close to the borders. You can see how div2 contains div3,

div4, and div5 because the borders are contained within div2’s border.