Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS SHOUTING! – changing text case with CSS.

UPPERCASE, lowercase or MixCase?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.

This entry was posted on Wednesday, October 24th, 2007 at 12:16 pm and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.