html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS text-transform property

Definition

The CSS text-transform property allows us to transform text in certain ways.

Applies To

All elements.

Property Values

capitalize - The first letter of each word will be capitalized.

inherit - Text attributes inherited from the parent element.

lowercase - The text is tranformed to lowercase.

none - Text reamins unaltered (default).

uppercase - The text is tranformed to uppercase.

Default Value

Default value is set to none which produces no text transformation.

Inheritance

The text-transform property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS text-transform property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS text-transform Property</title>

<!-- Valid values for CSS text-transform Property are:
	
	capitalize, inherit, lowercase, none and uppercase.
	
--> 

<style type="text/css">

/* Uppercase h1 headings */
h1 {
  text-transform: uppercase;
}

/* Capitalize h2 headings */
h2 {
  text-transform: capitalize;
}

/* Lowercase h3 headings */
h3 {
  text-transform: lowercase;
}

/* All paragraphs will be inerited from parent element */
p {
  text-transform: inherit;
}

</style>

</head>
<body>
<h1>All h1 Headings Will Be TransformED To Uppercase</h1>
<h2>all h2 headings will be capitalized</h2>
<p>All paragraph Text Will Inherit transform attributes from its containing 
element which in this case is the body element. The body element will default 
to NONE as nothing has been set. So paragraph text will remain unchanged</p>
<h3>ALL H3 TEXT WILL BE TRANSFORMED TO LOWERCASE</h3>
<p>All paragraph Text Will Inherit transform attributes from its containing 
element which in this case is the body element. The body element will default 
to NONE as nothing has been set. So paragraph text will remain unchanged</p>
</body>
</html>

How It Looks

The results of using the text-transform property with the values above will look something like the following:

notepad
CSS text-indent    << Prev          Next >>   CSS top

go to home page Homepage go to top of page Top


CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.