CSS Text Transform

The text-transform CSS property changes how an element's text is capitalized. It can be used to make text appear in title case, all-uppercase or all-lowercase, or with each word capitalized.

Developers can utilize CSS properties to change a text font's case while authoring and creating a website. In this article, we'll cover two approaches: utilizing text-transform and using font-variant.

The text-transform changes the casing style for a section of text.

       p-none {
		  text-transform: none;
       p-caps {
		  text-transform: capitalize;
       p-upper {
		  text-transform: uppercase;
       p-lower {
		  text-transform: lowercase;

Text Transform Examples

Style Display
<span class="p-caps">coding tools for all</span> coding tools for all
<span class="p-upper">coding TOOLS for All</span> coding TOOLS for All
<span class="p-lower">coding TOOLS for All</span> coding TOOLS for All

The main text-transform you will use

  • none: Defines normal text, with lower case letters and capital letters
  • capitalize: Each word in a text starts with a capital letter
  • uppercase: Defines only capital letters
  • lowercase: Defines no capital letters, only lower case letters
  • inherit: Uses the case and capitalization of its parent

Uses of Text-Transform Property

  • You can dynamically transform text using HTML object selection with text-transform.
  • Makes it simple to capitalize proper nouns. The text-transform feature will show usernames as proper nouns.
  • Text-"capitalize" transform's option can be used to ensure that blog post names are capitalized.
  • Preventing text from changing. To prevent text from being altered, you can alternatively specify the value "none" to the text-transform attribute.
  • Sentence and paragraph punctuation, as in blog postings and news websites.

CodersTool Categories