text-transform (CSS property)

By Adam Roberts

HTML & CSS

September 2, 2014

Write powerful, clean and maintainable JavaScript.

~~RRP $11.95~~

Get the book free!

Syntax

text-transform: { capitalize | lowercase | none | uppercase | inherit } ;

Description

This property controls if and how an element’s text content is capitalized.

Example

These style rules make
h1 headings use only uppercase letters, while the first
letter of each word in h2 headings will be
uppercased:

h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}

Value

capitalize: Transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document
lowercase: Transforms all characters to lowercase
none: Produces no capitalization effect at all
uppercase: Transforms all characters to uppercase

Create a 3D CSS Printer that Actually Prints!

HTML & CSS

By Jhey Tompkins, June 16, 2021

Learn how to make impressive 3D objects in CSS, and even how to make them do amazing things like print a real image from a URL you supply!

Squeaky Portraits: Having Fun with the CSS path() Function

HTML & CSS

By Jhey Tompkins, March 25, 2021

The CSS path() function finally has wide browser support. Learn how to use it to take your clips paths to awesome new heights.

Canvas vs SVG: Choosing the Right Tool for the Job

HTML & CSS

By Maria Antonietta Perna, February 24, 2021

Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.

Adam Roberts

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.