CSS text-transform, All Caps, Upper, Lower & Title Case
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.
| Value | Info |
|---|---|
| capitalize | Convert all the first letter of every chosen character to capitalize. |
| uppercase | This CSS property transforms all the selected words to ALL CAPS or uppercase. |
| lowercase | Transform all the chosen text to lowercase. |
| full-width | This 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). |
| none | Stop all the chosen characters from being transformed, It keeps them to the initial state as it was included. |
| inherit | Provides 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>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
}
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.
<p class="lowercase-css">THIS CSS PROPERTY SETS ALL THE UPPERCASE TEXT STRING TO LOWERCASE</p>.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;
}
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.
