2 demos of CSS Uppercase, capitalize by text-transform property

CSS text-transform property

The text-transform property is used to transform the text into uppercase, lowercase or capitalized form in the specified element.

>>An uppercase example in the heading

For example, in your heading 1 (h1), you want all words started with the capital letter. Similarly, if you need the whole sentence or paragraph transformed to uppercase, that might be database driven (or not in known form). This can be done by using the CSS text-transform property. How to use it…? See the examples below.

A capitalize example

The text-transform property supports the following values:

  • capitalize: makes the first letter of each word capital.
  • uppercase: converts the specified text in upper case form.
  • lowercase: converts specified text in the lowercase.
  • none: The text remains as it is. This is the default value.

CSS uppercase example

Following is an uppercase example. The example transforms the text given in the heading 1 to the uppercase by using the uppercase value in the text-transform CSS property.

CSS Uppercase demo

Experience this example online

You can see, only the first letter of the heading is capital in the code. As this code is executed, the text-transform property converted it to uppercase format by using the uppercase value.

CSS capitalize example

The following example shows how to use the capitalize value. The example transforms the text given in the heading 1 to the capitalized format.

CSS Text Transform

Experience this example online

Before the execution, you can see the text in the heading 1 contains only one capital letter, which is at the beginning. After the code is executed, the first letter of each word is capitalized by using the capitalize value in the text-transform property.


Similarly, you can use the lowercase and none values to transform text by using text-transform property.

Was this article helpful?

Related Articles

Leave A Comment?