🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS Text Transform

Control capitalization effortlessly. Learn how to transform text to uppercase, lowercase, or capitalize without changing content.

style.css
p.title {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}

Hello World

styles.css
1 / 10
Aa

Tutor:The text-transform property controls the capitalization of text. It allows you to change the case without altering the HTML content.


Typography Mastery

Unlock nodes by learning transformation types.

Concept 1: Uppercase & Lowercase

The two most common transformations are uppercase (ALL CAPS) and lowercase (no caps). These are useful for ensuring data consistency, like displaying promo codes or email addresses.

System Check

Which value converts text to all capital letters?

Community Tips

Typography Tricks

Found a great font pairing with uppercase headers? Share your findings.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Text Transform

Author

Pascual Vila

Frontend Instructor.

The text-transform property is a powerful tool for managing typography on the web. It allows you to control the capitalization of text, regardless of how it was typed in the HTML source.

Key Values

CSS offers several values to handle text case efficiently:

  • uppercase: Converts all characters to uppercase. Perfect for buttons or section headings.
  • lowercase: Converts all characters to lowercase. Can be used for stylistic usernames.
  • capitalize: Transforms the first character of each word to uppercase. Useful for names and titles.
  • none: Prevents any transformation, ensuring text renders exactly as written in the HTML.

Accessibility Note

While visual transformation is useful, it does not change the actual text content in the DOM. However, some screen readers may announce uppercase text differently (e.g., reading letter by letter if they interpret it as an acronym). Use text-transform for styling, but ensure the underlying HTML text makes sense.

Text Transform Glossary

Uppercase
A value that transforms all characters to their capital form. Example: "text" becomes "TEXT".
Lowercase
A value that transforms all characters to their small form. Example: "TEXT" becomes "text".
Capitalize
Transforms the first letter of every word to uppercase. Example: "john doe" becomes "John Doe".
Full-Width
Forces characters inside a square, commonly used in East Asian typography alignment.