How to Convert Upper & Lower Case in HTML


When programming dynamic websites, the "text-transform" property in Cascading Style Sheet (CSS) code can help you cover for times when users forget to capitalize titles. If you want all-caps or no-caps menu titles, "text-transform" will even help you separate content from style by doing the conversion to upper or lower case for you. Applying this property in CSS rather than typing text as you want it to appear in HTML makes it easier to switch back to regular capitalization.

  • Open the HTML file for your Web page and find the tag containing text you want to convert to upper- or lower-case letters. This can be a <p> tag for a paragraph or a <div> tag for an entire section of the page.

  • Add a class attribute to your tag and give it a value such as "uppercase" or "nocaps." This is the your new class name for use in CSS. Here is a tag with a class:

    <p class="allcaps">An all-caps paragraph...</p>

    You can assign more than one class name to a tag. If the tag already contains a different class name, add a space after the class name and write the new one. Here is an example:

    <p class="blue allcaps">A blue, all-caps paragraph...</p>

  • Open the external CSS file for your website. Find the file name and location of the CSS file by looking at the "href" attributes of your <link> tags towards the top of the HTML code. Add code between <style> tags within the <head> tags of your HTML file if you do not use an external CSS file or are unsure.

  • Write your CSS selector to "select" the tag where you want to change the case of text and then set the "text-transform" property to your desired value. There are three values for this property: uppercase, lowercase and capitalize. Use "capitalize" to capitalize the first letter of every word in the text. Here is how your CSS might look:

    p .allcaps {text-transform: uppercase;}

    td .nocaps {text-transform: lowercase;}

    h1 .initalcap {text-transform: capitalize;}

Tips & Warnings

  • Use "text-transform: capitalize" to force titles to capitalize when writing CSS for a dynamic website where other users will create content from a back-end system. This will clean up titles when users capitalize them incorrectly. Examples of back-end systems include WordPress, Joomla and Drupal.
  • Always back up your HTML and CSS files before editing them.


  • Photo Credit Stockbyte/Stockbyte/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!