Setting letter-spacing and word-spacing
The letter-spacing and word-spacing properties work in the same way, taking length
values or a default of normal. For letter-spacing, the value increases whitespace between
characters, and for word-spacing, the defined value increases whitespace between words.
Negative values are permitted, which cause characters or words to bunch together (or
kern, if you??™re a graphic designer). A certain amount of experimentation is recommended
if you decide to use these properties. Because the Web??™s resolution is low, subtle kerning
changes are hard to achieve online, and the results often end up looking clunky. Also,
spacing varies from platform to platform. One occasion when letter-spacing is worth
experimenting with, however, is when styling headings for web pages: a small increase in
the letter-spacing value can help further distinguish headings from body copy.
Examples of these properties in use are shown in the following code block:
Note that prior to version 7, Internet Explorer didn??™t support adjacent sibling selectors,
and so this effect won??™t work in version 6 or below of Microsoft??™s browser. A
workaround would be to use a style sheet linked via a conditional comment to indent
all paragraphs for Internet Explorer 6 and below. See the ???Dealing with Internet
Explorer bugs??? section in Chapter 9 for more on conditional comments.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
86
h1 {
letter-spacing: 3px;
}
h2 {
word-spacing: 2px;
}
Controlling case with text-transform
The text-transform property enables you to change the case of letters within an element.
Pages:
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161