How do I control capitalization effects on the display of text?
Author: Deron Eriksson
Description: This CSS example shows how to use the text-decoration property to control underlining, overlining, striking, and blinking text.
Tutorial created using: Windows XP


In CSSW, the text-transform property can be used to control capitalization effects on text. The text-transform property can have the following values: capitalize, uppercase, lowercase, none, and inherit. If "capitalize" is applied to an element, the first letter of each word will be uppercased. However, note that different browsers can apply capitalization differently since they can have different ideas about what words are. If the value is "uppercase", all letters of all words will be uppercased. If the value is "lowercase", all letters of all words will be lowercased. If the value is "none", no case conversion will be performed. If the value is "inherit", the case handling will be inherited from the parent element.

The style-test.html file demonstrates text-transform values of none, capitalize, uppercase, and lowercase.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { background-color: aqua; }
div.one { text-transform: none; }
div.two { text-transform: capitalize; }
div.three { text-transform: uppercase; }
div.four { text-transform: lowercase; }
</style>
</head>
<body>
<div>
<div class="one">This has no transformation</div>
<div class="two">This has been capitalized</div>
<div class="three">This has been uppercased</div>
<div class="four">This has been lowercased</div>
</div>
</body>
</html>

The style-test.html page is shown here in IE7.

capitalization example