HTML and CSS Reference
In-Depth Information
id selector
used in
style sheet
included in
<div> tag
values passed to evnt and
currElement parameter in user-
defined function popupCaption()
class selector in style
sheet applied to <div>
tag to modify text style
Figure 11-31
The popupCaption( ) function code uses these values to show the pop-up caption at
the position defined by the trailImg1 selector in the style sheet. The embedded style sheet
on the Trails Web page has four id selectors — trailImg1 through trailImg4 — to set the
position at which each pop-up caption appears. It also defines a style for the class captionText,
which defines the format of the pop-up caption text. Table 11-19 shows the embedded style
sheet code used to set the position of the pop-up caption and format the caption text.
When to use <div> and
<span> Container Tags
The <div> tag groups
items as a block, and the
<span> tag groups items
inline. Inline refers to
the fact that the <span>
tag does not do any
formatting of its own. For
example, the <div> tag
will cause a paragraph
break, and the <span> tag
will not. Using the <span>
tag allows changing
styles within a division
or paragraph.
Table 11-19 Code to Use Selectors in a Style Sheet
Line
Code
89
#trailImg1 {
90
position: absolute;
91
visibility: hidden;
92
display: inline-block;
93
}
94
95
#trailImg2 {
96
position: absolute;
97
visibility: hidden;
98
display: inline-block;
99
}
100
101
#trailImg3 {
102
position: absolute;
