How to capitalize letters using CSS

Published January 22, 2015 by CSS Newbies.

For capitalizing all letters by using the CSS, you need to use the ‘text transform’ property. This particular property will allow the user to make the characters capitalize, uppercase and lowercase. By definition, the property of text transformation actually controls the whole method of transformation of texts. However, this article will describe the way of capitalizing all letters using CSS.

To capitalize each character by using CSS, at first you need to take a detailed look towards the text transformation property. The values of text transformation property are mentioned below.

  • None: It does mean that no capitalization.
  • Capitalize: It does mean that the first characters of each word will be capitalized.
  • Uppercase: It does mean that all the characters will be uppercase.
  • Lowercase: It does mean that all the characters will be lowercase.
  • Initial: Initial will set the property to default value, which means there will be no capitalization.
  • Inherit: It means the inheritance of this property from the parents.

However, to capitalize each character of a text, you need to use the ‘uppercase’ property. Here is a basic example of implementation.

p.uppercase {
    text-transform: uppercase;
}

p.uppercase {
    text-transform: uppercase;
}

You may think that there may not be any important use of it, but it can become very useful to make the link stand out from the normal text. In addition, you can actually force the texts to become proper case. It does mean that there is no need of storing the information separately and using a server side language for changing the texts. You can do it by just setting up the CSS perfectly.

Moreover, you should know that even Google Chrome 1.0, Internet Explorer 4.0, Mozilla 1.0, Safari 1.0 and Opera 7.0 are the first browser versions, which completely support this particular property.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>