CSS text-transform, All Caps, Upper, Lower & Title Case

Last updated on: by Digamber

CSS All Caps

Today I am going to tell you about CSS text-transform property, when we need to make our website’s text look good then CSS text-transform property comes to our mind. This property helps us to make the look and feel beeter of our content.

With the help of CSS text-transform property, you can transform your text to ALL CAPS (uppercase), lower case, and title case. This property even supports the pseudo selectors for providing the unique style to your font or text.

There are various methods provided by CSS text-transform property to display the content (text) on your application.

CSS text-transform Properties

Following are the values you can use to style your text with text-transform CSS property.

capitalizeConvert all the first letter of every chosen character to capitalize.
uppercaseThis CSS property transforms all the selected words to ALL CAPS or uppercase.
lowercaseTransform all the chosen text to lowercase.
full-widthThis CSS property compels the writing of a character specially ideograms and Latin scripts — within a square,
permitting them to be arranged in the typical East Asian areas (like Japanese or Chinese).
noneStop all the chosen characters from being transformed, It keeps them to the initial state as it was included.
inheritProvides the state of its parent to the selected text, If the parent is capitalized then the child will also be capitalized.

CSS text-transform Syntax

/* CSS values */
text-transform: none;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
text-transform: full-width;
text-transform: full-size-kana;
/* Global CSS values */
text-transform: unset;
text-transform: inherit;
text-transform: initial;

How Do I Make the Every First Letter of a Word to Uppercase using CSS text-transform Property?

Title case or capitalize term is used, when we set every first letter of the word to upper case. The capitalize value makes a word string to represent in a title case.

Note: If any letter in the selected string is uppercase, then this CSS property won’t be able to convert the text to lowercase.

<p>in this example, i am going to set every first value of the text to uppercase. let's see how we gonna capitalize all the text in a given word.</p>
  text-transform: capitalize;

How to Make All the Text in a Word Uppercase using CSS text-transform Property?

I am using the uppercase CSS text-transform value, this value sets every text to all caps in a selected CSS class.

<p class="css-all-caps">this css property sets all the lowercase text string to uppercase</p>
p.css-all-caps { 
   text-transform: uppercase

CSS All Caps

How Do I Make All the Text in a Word to Lower Case?

I am using the lowercase CSS property to convert all the words in a string to lowecase.

.lowercase-css {
    text-transform: lowercase ;

How to Style First Letter of a String using CSS Pseudo Selector?

A pseudo selector is comparatively a cool feature, and you can use the ::first-letter selector to implement a unique style to the first letter of a string. This enables you to implement some ‘unique’ styling in your word string if you wish.

<p>This conTENT iS spread All ovER thE PlaCe With CAPital and LOWER LETTERS. 
but THE firST wOrd Starts wITH a laRGe Capital letter.</p>
p {
    text-transform: lowercase;
    line-height: 4;
p::first-letter {
    font-size: 4em;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;

CSS Pseudo Selector

Final Thought
You can transform text in your application using text-transform property, whether it is lower, upper or title case text it will be styled as per your wish.

CSS text-transform property prevents the use of JavaScript to style the text in your app. CSS is a way better option than JavaScript in many terms, and it is fully capable of managing your content’s style.


A Full-stack developer with a passion to solve real world problems through functional programming.