HTML and CSS Reference
In-Depth Information
Structuring the Web Page
It is useful to understand how you can structure your Web page by dividing it
into logical sections. In previous chapters, you used <div> </div> tags for structure.
Specifically, you aligned images by placing the image element within the tag. You also
set specific styles using the <div> </div> tags. When you use the <div> </div> tags,
you are able to design a layout that uses CSS, including inserting images.
When structuring your Web pages, it is also useful to understand the concept of
the CSS box model. The
box model
describes the structure of the elements that are
displayed on the Web page. Once you have positioned the box on the Web page, you
can control its appearance by manipulating its padding, borders, and margins, as shown
in Figure 7-10. The
margin
specifies the space between the element and other content
on the Web page. The
border
is what surrounds the element content. The
padding
is
the space between the content of the element and the box border. These four elements
(content, padding, border, and margin) determine how the element content is displayed
in the browser.
The Box Model
The CSS box model is an
important concept to
understand. Determining
an effective structure of
your Web pages involves
correctly determining the
box model controls. Search
the Web for the term “box
model” to find numerous
resources that discuss box
model control principles.
Top
TM
Margin
TB
Border
TP
Padding
Left
LM
LB
LP
Content of element
RP
RB
RM
Right
BP
BB
BM
Bottom
TM-top margin
TB-top border
TP-top padding
BM-bottom margin
BB-bottom border
BP-bottom padding
LM-left margin
LB-left border
LP-left padding
RM-right margin
RB-right border
RP-right padding
Figure 7-10
You will manipulate some of these characteristics (border, margin-bottom,
margin-top) in the external style sheet completed in this section of the chapter. You
will also use the <div> </div> tags to divide the Web page to allow the pop-up effect.
Box Model
Troubleshooting
You can also find an
abundance of information
on the box model
troubleshooting tools like
those in Firebug or Google
Chrome Developer Tools.
Creating a Pop-up Image Using Cascading Style Sheets
The CSS code for the external style sheet defines a new style that provides a pop-up
image effect on a Web page. In this case, you will add link and hover functionality that
allows a Web site visitor to hover (i.e., move the mouse pointer) over an image and display
a larger version of the image.
The two files used for the pop-up effect, waterfall.html and whale.html, are stored
in the Data Files for Students. These files are all ready to use for the pop-up effect but
need to have the link statements inserted after the external style sheet is created and
