CSS text-transform Property

CSS text-transform property is used to transform element’s text to upper or lower or camel case. See the example below:

Example:

p.upper{
  text-transform: uppercase;
}
p.camel{
  text-transform: capitalize;
}
p.lower{
  text-transform: lower;
}

CSS Syntax

The text-transform property has the following syntax:

text-transform: none|uppercase|capitalize|lowercase|initial|inherit;

Property Values

The text-transform property accepts the following values:

noneDefault Value. The text remains as it is.
uppercaseTransforms the text to upper case.
capitalizeTransforms the first letter of each word to upper case.
lowercaseTransforms the text to lower case.
initialSets the text-transform property to its default value. which is none.
inheritInherits the text-transform value from its parent element.

General Info

Default Valuenone
InheritedYes
JavaScript Usageelement.style.textTransform = “uppercase”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.