html text-transform,CSS text-transform

CSS text-transform

Run

Stack editor

Unstack editor

Example

p {

font-family: sans-serif;

font-size: 5vw;

color: orangered;

}

.uppercase {

text-transform: uppercase;

}

.capitalize {

text-transform: capitalize;

}

.lowercase {

text-transform: lowercase;

}

Uppercase and upperCASE

capitalize and capitaLIZE

Lowercase and lowerCASE

The CSS text-transform property is used to control captialization of text. For example, you can force text to be uppercase, lowercase, or title case (capitalized).

In the above example, pay particular attention to the way the text has been entered, and how it is rendered after having the text-transform property applied. You'll notice that captalize is only applied to the first character, whereas the other two are applied to the whole word.

Syntax

text-transform: none | capitalize | uppercase | lowercase | full-width

Possible Values

none

No effects are applied to the text.

capitalize

First character of each word is rendered in uppercase. The remaining characters are rendered as they are.

uppercase

All characters are rendered in uppercase.

lowercase

All characters are rendered in lowercase.

full-width

Puts all characters in fullwidth form. If the character does not have a corresponding fullwidth form, it is left as is. This value is typically used to typeset Latin characters and digits like ideographic characters.

This value was added in CSS3 and at the time of writing, is at-risk of being dropped from the spec.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

none

Applies To

All elements

Inherited?

Yes

Media

Visual

Example Code

h1 {

text-transform: uppercase;

}

Official Specifications

CSS Text Module Level 3 (W3C Last Call Working Draft 10 October 2013)

CSS Level 2.1 (W3C Recommendation 07 June 2011)

CSS Level 1 (W3C Recommendation 17 Dec 1996)