blockquote {
background: url(quote-open.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
3. Style the pull quote paragraph text. Using the contextual selector blockquote p,
style the paragraph text within the blockquote element. Making the text bold and
larger than the surrounding copy helps it stand out??”but to ensure it doesn??™t
become too distracting, knock back its color a little.
Creating pull quotes in CSS
Note that the image-replacement techniques described earlier in the chapter
offer another means of adding a drop cap of a more graphical nature,
should such a thing be required.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
102
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
}
4. Use the background property to add the closing quote mark, which is added to the
paragraph, since you can only add one background image to an element in CSS.
The background??™s position is set to 100% 90%??”far right and almost at the bottom.
Setting it at the absolute bottom would align the closing quote with the bottom of
the leading under the last line of the paragraph text; setting the vertical position
value to 90%, however, lines up the closing quote with the bottom of the text itself.
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
background: url(quote-close.gif) 100% 90% no-repeat;
}
5. Tweak the positioning. If you test the page now, you??™ll see the paragraph content
appearing over the top of the background images.
Pages:
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179