How to Transform Text to Uppercase in CSS? Last Updated : 29 Oct, 2024 Comments Improve Suggest changes Like Article Like Report To transform text to uppercase in CSS, you can use the text-transform property. This property allows you to control the capitalization of text visually, without altering the original content in the HTML markup. By setting text-transform: uppercase; all text within the specified HTML element will display in uppercase, making it ideal for emphasizing headings or important sectionsConvert Text to Uppercase using text-transform PropertyThe text-transform property is used to specify how to capitalize or format text. To convert text to uppercase, set the value of text-transform to uppercase.Example 1: In this example, we will convert text to Uppercase using the text-transform property. HTML <!DOCTYPE html> <html> <head> <title>Uppercase Text</title> <style> .uppercase-text { text-transform: uppercase; } </style> </head> <body> <p class="uppercase-text"> This text will be displayed in uppercase. </p> </body> </html> Output:THIS TEXT WILL BE DISPLAYED IN UPPERCASE.Additional text-transform ValuesThe text-transform property supports various values to control the appearance of text:uppercase: Converts all characters in the text to uppercase.lowercase: Converts all characters in the text to lowercase.capitalize: Capitalizes the first letter of each word, which is useful for styling titles or headings in a sentence case format.none: Disables text transformation, displaying text in its original formConclusionThe text-transform property is a simple yet powerful tool for managing text appearance in CSS. With values like uppercase, lowercase, and capitalize, you can easily style text to fit your design needs without altering the HTML content itself. Use text-transform: uppercase; for bold headings, or text-transform: capitalize; to achieve a more natural look by capitalizing the first letter of each word. This property helps maintain a clean and organized HTML structure while providing flexibility in text presentation Comment More infoAdvertise with us Next Article Tailwind CSS Text Transform P ppatelkap Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Tailwind CSS Text Transform This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-transform property. This class is used to control the capitalization of the text. Text Transform classes: uppercase lowercase capitalize normal-case uppercase: 2 min read Tachyons Typography Text Transform Tachyons toolkit is a free and open-source CSS toolkit that is used to create a responsive website. In this article, we will learn how to transform text using the Tachyons toolkit. Tachyons Typography Text Transform is used to change the capitalization of the text. Syntax: <element-name class="cl 1 min read CSS text-transform Property The text-transform property in CSS is used to control the capitalization of text. It allows you to transform text to uppercase, lowercase, or capitalize the first letter of each word. Syntaxtext-transform: none| capitalize | uppercase | lowercase |initial | inherit; Property ValuesHere are the prope 4 min read JavaScript - How to Make First Letter of a String Uppercase? Here are the different approaches to make the first letter of a string uppercase in JavaScript.1. Using charAt() with slice() Method (Most Common)The combination of charAt() and slice() is the simplest and widely used way to capitalize the first letter of a string.JavaScriptconst s1 = "javaScript"; 2 min read JavaScript - How to Make First Letter of a String Uppercase? Here are the different approaches to make the first letter of a string uppercase in JavaScript.1. Using charAt() with slice() Method (Most Common)The combination of charAt() and slice() is the simplest and widely used way to capitalize the first letter of a string.JavaScriptconst s1 = "javaScript"; 2 min read Foundation CSS Prototyping Utilities Text Transformation Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, 3 min read Like