Transforming text using CSS text-transform

The CSS property text-transform is very useful when it comes to standardising the look of headings and various other elements from inconsistencies when content has been added to a website.

Basic usage

The rule below will capitalize (title-case) all words in the sentence.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

p { text-transform: capitalize; }

text-transform Properties

/* CSS values */
text-transform: none; /* stops all rules */
text-transform: lowercase;
text-transform: uppercase;
/* title case - only works when original content is lowercase */
text-transform: capitalize;
/* Global CSS values */
text-transform: unset;
text-transform: inherit; /* provides state of the parent */
text-transform: initial;

How to style the first letter using CSS Pseudo Selector

Often you may want to set a heading a heading from uppercase to sentence case, to achieve this you can use the pseudo selector ::first-letter.

Example

<p>loRem ipSUM dolor SIt AMET, consectETur ADipiscing elit</p>

p {
  text-transform: lowercase;
}
p::first-letter {
  font-size: 1.5em;
  font-weight: bold;
    text-transform: uppercase;
}

The above will help keep your content consistent and ensure that whatever user mistakes happen when entering content is ironed out.

There are also methods to achieve this using PHP, which has a variety of inbuilt functions to set content to lowercase, uppercase and more. It is probably a good idea to ensure that such manipulation is checked to see at which level this makes the most sense.