CSS Text Transformation- Uppercase, Lowercase, and Capitalize

In this article, we will go over the CSS text transformation properties, uppercase, lowercase, and capitalize.

Using these built-in CSS functions, we can make all text uppercase, lowercase, or capitalized (meaning the first letter in each word is capitalized).

For example, let's take the following paragraph:

The best way to learn electronics is to do practical projects. Buy a breadboard, resistors, capacitors, transistors, and learn to build circuits from these parts. You'll also need some jumper wires to use in the circuit. You'll either use a voltage source such as a DC power supply or a battery to power the circuit. These practical circuitbuilding projects will help you learn electronics and how to connect circuits together.

You can see that it is mixed up with uppercase, lowercase, capitalized, and non-capitalized words. We will see what happens to this above paragraph when transformed by the uppercase, lowercase, and capitalize functions.

How to Make All Text Uppercase

To make all text uppercase in CSS, we put the following line of CSS into the element in which we want to make all uppercase.

For example, if we're styling the p tag, the following line would make all text in the p tag uppercase:

p { text-transform:uppercase; }

This is the original paragraph shown at the top of the page after passing through the uppercase text transformation (shown below):

The best way to learn electronics is to do practical projects. Buy a breadboard, resistors, capacitors, transistors, and learn to build circuits from these parts. You'll also need some jumper wires to use in the circuit. You'll either use a voltage source such as a DC power supply or a battery to power the circuit. These practical circuitbuilding projects will help you learn electronics and how to connect circuits together.

To see a practical example of changing text from lowercase to uppercase, see Changing a Menu from Lowercase to Uppercase Characters.

How to Make All Text Lowercase

To make all text lowercase in CSS, we put the following line of CSS into the element in which we want to make all lowercase.

For example, if we're styling the p tag, the following line would make all text in the p tag lowercase:

p { text-transform:lowercase; }

This is the original paragraph shown at the top of the page after passing through the lowercase text transformation (shown below):

The best way to learn electronics is to do practical projects. Buy a breadboard, resistors, capacitors, transistors, and learn to build circuits from these parts. You'll also need some jumper wires to use in the circuit. You'll either use a voltage source such as a DC power supply or a battery to power the circuit. These practical circuitbuilding projects will help you learn electronics and how to connect circuits together.

How to Make Text Capitalized

To make the text capitalized (meaning the first letter in each word is uppercase) in CSS, we put the following line of CSS into the element in which we want to capitalize.

For example, if we're styling the p tag, the following line would make all words in the p tag capitalized:

p { text-transform:capitalize; }

This is the original paragraph shown at the top of the page after passing through the capitalize text transformation (shown below):

The best way to learn electronics is to do practical projects. Buy a breadboard, resistors, capacitors, transistors, and learn to build circuits from these parts. You'll also need some jumper wires to use in the circuit. You'll either use a voltage source such as a DC power supply or a battery to power the circuit. These practical circuitbuilding projects will help you learn electronics and how to connect circuits together.