CSS Text Transformation

CSS CODES & EXAMPLES

CSS Text Transformation

Learn how to change the capitalization of text using CSS. Transform text into uppercase, lowercase, capitalize or keep the original form without changing the HTML content.

← CSS Text Decoration Start Learning →

What is Text Transformation?

Change the appearance of text with CSS

CSS text transformation allows you to control the capitalization of text without modifying the original HTML text. The main CSS property used for this purpose is text-transform.

Main Property: text-transform

text-transform

The main CSS property

The text-transform property defines how the text should be displayed in terms of capitalization.

text-transform.css

p {
  text-transform: uppercase;
}

welcome to css text transformation

text-transform: none

Keep the original text

The none value prevents text transformation and displays the text normally.

none.css

p {
  text-transform: none;
}

Welcome To Shree Narayan Computers & Education Center

text-transform: uppercase

Convert all letters to uppercase

The uppercase value converts all letters to capital letters.

uppercase.css

h2 {
  text-transform: uppercase;
}

computer education courses

text-transform: lowercase

Convert all letters to lowercase

The lowercase value converts all letters to small letters.

lowercase.css

p {
  text-transform: lowercase;
}

LEARN COMPUTER APPLICATIONS

text-transform: capitalize

Capitalize the first letter of words

The capitalize value changes the first character of each word to uppercase.

capitalize.css

p {
  text-transform: capitalize;
}

diploma in computer application

Text Transformation Comparison

Compare the common values

none

Transformation with Headings

Professional heading styles

Text transformation is commonly used for section headings, labels and category titles.

OUR COURSES

career focused computer education

Learn practical skills through structured computer courses designed for students and professionals.

heading-transform.css

.heading-label {
  text-transform: uppercase;
}

.heading-title {
  text-transform: capitalize;
}

Buttons

Transform button labels

buttons.css

.btn-uppercase {
  text-transform: uppercase;
}

.btn-capitalize {
  text-transform: capitalize;
}

.btn-lowercase {
  text-transform: lowercase;
}

Course Card Example

Practical education website design

featured courseonline

diploma in computer application

Learn computer fundamentals, Microsoft Office, internet, digital services and practical computer applications.

₹2,999 view course

course-card.css

.course-label {
  text-transform: uppercase;
}

.course-title {
  text-transform: capitalize;
}

.course-button {
  text-transform: uppercase;
}

Combining Text Properties

Use transformation with other CSS properties

Text transformation can be combined with font size, font weight, letter spacing, text decoration and other typography properties.

learning resources

computer education

Build practical digital skills for study, work and career growth.

combined.css

.label {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.title {
  text-transform: capitalize;
  font-weight: 700;
}

.description {
  text-transform: none;
}