Ever had to wade through pages of text on a website to amend the appearance of titles or paragraph headings, to make sure they all look consistent?

It can be no fun, especially if you have a site which has content added by multiple authors, all with slightly different preferences in typing.

Should text be: ALL UPPERCASE? all lowercase? Or Capitalised? With CSS you can define the appearance of text with the text-transform property.

The values of the text-transform property can be any one of: none, capitalise, uppercase or lowercase. When these are applied to a CSS class or definition, it becomes possible to ensure that all text is displayed consistently. The following examples will all use paragraph headings <h3> with inline CSS for convenience. CSS will be used to transform the text appearance.

this text is all written in lower case

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: uppercase;">this text is all written in lower case</h3>

THIS TEXT IS ALL WRITTEN IN UPPERCASE

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: lowercase;">THIS TEXT IS ALL WRITTEN IN UPPERCASE</h3>

this text is all written in lower case

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: capitalize;">this text is all written in lower case</h3>

NB: it is important to note the spelling of capitalize with a z – spelling the value capitalise is not a valid value.

Whilst this property is particular useful for headings and it also value in lists <ul> / <ol> <li> – and navigation / menu text. By giving the user a consistent text appearance for these items it helps to make a website interface much more intuitive.