#wrapper {
margin: 0 auto;
width: 400px;
background: url(styling-semantic-text-baseline.gif);
}
The following image shows how this image works behind the text styled in this
exercise??”as you can see, the vertical rhythm is maintained right down the page.
WORKING WITH TYPE
97
3
Creating drop caps and pull quotes using CSS
The previous exercise showed how something aimed primarily at the world of print
design??”a baseline grid??”can actually work well online, and this section will continue that
theme, showing how to use CSS to create drop caps and pull quotes. Drop caps??”large letters
typically used at the start of a printed article??”are rare online, although they can be a
useful way of drawing the eye to the beginning of the body copy. Pull quotes are more
common, and while part of their use in print??”taking a choice quote and making it stand
out on the page to draw in the reader??”is less effective online, pull quotes are still handy
for highlighting a piece of text (such as a quote or idea) or for providing client quotes on
a company website.
Required files styling-semantic-text-2.html and styling-semantic-text-2.
css from the chapter 3 folder.
What you??™ll learn How to create a drop cap for a website, and how to use the CSS
float property. Any element can be floated left or right in CSS,
and this causes subsequent content to wrap around it.
Completed files drop-cap.html and drop-cap.css from the chapter 3 folder.
Pages:
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174