HTML and CSS Reference
In-Depth Information
Table 11-19 Code to Use Selectors in a Style Sheet (continued)
Line
Code
103
visibility: hidden;
104
display: inline-block;
105
}
106
107
#trailImg4 {
108
position: absolute;
109
visibility: hidden;
110
display: inline-block;
111
}
112
113
.captionText {
114
background-color: #006600;
115
padding: 5px;
116
margin-left:20%;
117
border: 2px solid black;
118
-webkit-border-radius: 20px;
119
-moz-border-radius: 20px;
120
border-radius: 20px;
121
-webkit-box-shadow: 3px 3px 4px #000;
122
-moz-box-shadow: 3px 3px 4px #000;
123
box-shadow: 3px 3px 4px #000;
124
width: 250px;
125
font-weight: bolder;
126
color: white;
127
}
Lines 89, 95, 101, and 107 declare the id selectors for each of the four trail images
(trailImg1 through trailImg4). Lines 90, 96, 102, and 108 set the position attribute to
absolute. Lines 91, 97, 103, and 109 use the visibility attribute (hidden) to hide the pop-up
caption. Lines 92, 98, 104, and 110 indicate that the display will be an inline-block.
Line 113 starts the class selector, captionText, to define how the pop-up caption text
should display. Line 114 sets the background color to a darker shade of green. Line 115
sets padding to five pixels. Line 116 indicates the pop-up caption should display with a
left margin 20% of the width of the browser window. Lines 117 through 124 describe the
features of the display box. The border is two pixels thick, with a 20 pixel radius for rounded
corners. Lines 120 to 122 describe the drop shadow for the display of the pop-up caption.
Line 125 indicates the text should be bolder, and line 126 sets the text color to white. Line
127 closes the captionText class selector.
