HTML Cookbook Basic HTML Course

It's Easy!


Alternate Version

Text Transform

The text-transform property changes the apparent case of text.


Text Tranform Declaration

The text-transform declaration form is:
text-transform: value

The values for text-transform are:
none, capitalize, lowercase and uppercase.

capitalize capitalizes the first letter of each word

lowercase changes all letters to lowercase

uppercase changes all letters to uppercase


Text-transform Styling

Text-transform may be used in a style statement or as a class in an element.

Sample Stylesheet
/* text-transform */
.capitalize {
text-transform: capitalize }

.lowercase {
text-transform: lowercase }

.uppercase {
text-transform: uppercase }


Sample Code
<p class="capitalize">
This sentence uses the CSS text-transform property.
</p>

<p class="lowercase">
This sentence uses the CSS text-transform property.
</p>

<p class="uppercase">
This sentence uses the CSS text-transform property.
</p>


Appears as:

This sentence uses the CSS text-transform property.

This sentence uses the CSS text-transform property.

This sentence uses the CSS text-transform property.


Assignment

Use text-transform on a web page. Post your page.

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!