Tuesday, September 14, 2010

Controlling case with text-transform

The text-transform property enables you to change the case of letters within an element.
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:
<h1>A heading</h1>
<h2>Another heading</h2>
<h3>A third heading</h3>
Here’s the CSS:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
h3 {
text-transform: capitalize;
}

No comments:

Post a Comment