totn CSS

CSS: text-transform property

This CSS tutorial explains how to use the CSS property called text-transform with syntax and examples.

Description

The CSS text-transform property defines how to capitalize the text of an element such as uppercase, lowercase, capitalize.

Syntax

The syntax for the text-transform CSS property is:

text-transform: value;

Parameters or Arguments

value

The capitalization of a font. It can be one of the following:

Value Description
uppercase All letters are converted to uppercase
p { text-transform: uppercase; }
lowercase All letters are converted to lowercase
p { text-transform: lowercase; }
capitalize First letter of each word is converted to uppercase
p { text-transform: capitalize; }
none Capitalization of letters are not changed
p { text-transform: none; }
inherit Element will inherit the text-transform from its parent element
p { text-transform: inherit; }

Note

  • If capitalize is chosen as the text-transform, the first letter of each word is capitalized while all other letters are not changed.
  • The CSS text-transform property is a great way to make your headings uppercase without having to edit the HTML pages.

Browser Compatibility

The CSS text-transform property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the text-transform property below, exploring examples of how to use this property in CSS.

Using Uppercase

Let's look at a CSS text-transform example where we set the text-transform to uppercase.

h1 { text-transform: uppercase; }

In this CSS text-transform example, we have used the CSS text-transform property to change all text in the <h1> tag to uppercase. This allows you to quickly change the display of the <h1> tag without having to edit your HTML pages.

Using Lowercase

Let's look at a CSS text-transform example where we set the text-transform to lowercase.

span { text-transform: lowercase; }

In this CSS text-transform example, we have used the CSS text-transform property to change all text in the <span> tag to lowercase.

Using Capitalize

Let's look at a CSS text-transform example where we set the text-transform to capitalize.

.author_name { text-transform: capitalize; }

In this CSS text-transform example, we have used the CSS text-transform property to capitalize the first letter of each word in the text of the author_name class.

Share on: