Page Layout with CSS - Web Development and Design Foundations with XHTML - page 219

they appeared in the source code. As you've worked through the exercises in the previ-
ous chapters, you created Web pages that the browser rendered using normal flow.
You'll practice this a bit more in the next Hands-On Practice, then later in the chapter
you'll experiment with positioning to configure the flow, or placement, of elements on a
Web page.
HANDS-ON PRACTICE 6.1
You will explore the box model in this Hands-On Practice as you create the Web pages
shown in Figure 6.5 and Figure 6.6.
Practice with Normal Flow
Launch a text editor and open the Chapter6/starter1.html file from the student files.
Save the file with the name box1.html. This page is displayed in Figure 6.5. Edit the
body of the Web page and add the following code to configure two <div> elements:
<div class="div1">
This is the first box.
</div>
<div class="div2">
This is the second box.
</div>
Now let's add the CSS to configure the “boxes.” Add a new style rule for a class named
div1 to configure a light blue background, dashed border, width of 200, height of 200,
and 5 pixels of padding. The code follows:
.div1 { width: 200px;
height: 200px;
background-color: #D1ECFF;
border: dashed;
padding: 5px;
}
Create a style rule for a class named div2 to configure a width and height of 100,
white background color, ridged border, 10 pixel margin, and 5 pixels of padding. The
code follows:
.div2 { width: 100px;
height: 100px;
background-color: #ffffff;
border: ridge;
padding: 5px;
margin: 10px;
}
Save the file. Launch a browser and test your page. It should look similar to the one
shown in Figure 6.5. The student files contain a sample solution at chapter6/box1.html.