Available values are capitalize, uppercase, lowercase, and none (the default). The
uppercase and lowercase values force the text of the applied element into the relevant
case regardless of the original content (e.g., enabling you to override the case of the original
content for ensuring that headings are consistent site-wide), whereas capitalize sets
the first letter of each word in uppercase.
In the following example, the first heading is styled as uppercase, the second as
lowercase, and the third as capitalize. Note that I wouldn??™t recommend such a mix of
styles in a website??”these rules are just examples of the properties in use.
Here??™s the HTML:
A heading
Another heading
A third heading
Here??™s the CSS:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
h3 {
text-transform: capitalize;
}
Creating alternatives with classes and spans
It??™s common in web design to define alternatives to the rules set for tag selectors (h1, h2,
p, etc.). This tends to happen most often in one of two situations. The first is when creating
alternate styles for a portion of a web page (as in print, it??™s often beneficial to use
different text for sidebars and boxouts??”standalone boxes on a magazine page, either
housing supplementary information to the main article, or an entirely independent piece
that needs to be visually distinct from other content on the page??”and sidebars to ensure
that each area of content is easy to distinguish from another).
Pages:
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162