Anyone who works with HTML/CSS on a daily basis will be aware of all the common CSS properties, however there are also some lesser known CSS properties which can be extremely useful. This article covers the text-transform property and how it can be used to your advantage when building web pages.
When adding things like headings to an HTML document, I’d always recommend adding them as though they were part of a sentence and not consider how the case of the words will appear visually on a page. During the coding stage, developers tend to use their own preferred method of displaying headings, some will captilize the first letter of each word, others will only capitilize longer, more important words, which can lead to inconsistencies on projects that have a number of developers on board.
However, by using CSS we can control how these headings will appear when rendered on a page. For example:
<h1>Here's a heading for the content</h1>
This works absolutely fine as it is and is grammatically correct, however if we want to style this, we can do so by simply using the text-transform CSS property to make all the letters in the heading uppercase.
h1 {
text-transform: uppercase;
}
The possible values for the text-transform property are: capitilize, uppercase, lowercase and none; which provide plenty of flexibility when working with the case of your text.
Summary
I’m sure that many of you are already aware of the text-transform property and use it for this very purpose to ensure consistent letter case across a website. Is this something you already do and if not would you now consider it in future projects?