When working with text, you will want to take advantage of the many options that CSS offers. One of these is to change make use of uppercase, lowercase, and capitalization. As you will see in the following code example, it’s straightforward. Note that this makes use of the h1 tag and the CSS text-transform property with the CSS3 uppercase and CSS3 lowercase attributes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1.uppercase {
text-transform: uppercase;
}
h1.lowercase {
text-transform: lowercase;
}
h1.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1 class="uppercase">Here is some basic text.</h1>
<h1 class="lowercase">Here is some basic text.</h1>
<h1 class="capitalize">Here is some basic text.</h1>
</body>
</html>The output of the html markup is displayed as:
As you can see, this sample makes use of CSS uppercase letters, CSS lowercase letters and capitalization. What’s interesting about the result is it doesn’t matter how the text is written as you can see in listing one. The text is forced to take on the attributes of the case chosen.
While it is useful to change the capitalization of your text in your documents, you will probably want to go further, and apply different additional effects as well.
In listing 2, the following properties have been added to change the color and font features:
color: #000DFF;
font: 15px arial, sans-serif;
color: #9E03D9;
font-weight: bold;
font-style: oblique;
line-height: 1.5; Also, the font tags have been changed to h1, h2, and P. Here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1.uppercase {
text-transform: uppercase;
color: #000DFF;
}
h2.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
font: 15px arial, sans-serif;
color: #9E03D9;
font-weight: bold;
font-style: oblique;
line-height: 1.5;
}
</style>
</head>
<body>
<h1 class="uppercase">Here is some uppercase text</h1>
<h2 class="lowercase">Here is some lowercase text</h2>
<p class="capitalize">Here is some capitalized text<br>
Here is some capitalized text<br>
Here is some capitalized text<br>
Here is some capitalized text<br>
Here is some capitalied text
</p>
</body>
</html>Displaying the HTML from listing 2 your browser results in the following being displayed:
As you can see, this sample has combined the use of CSS uppercase, CSS lowercase and CSS capitalize attributes, along with other font and text effects. This gives you a basic idea of what you can do with text and fonts within CSS (and there is so much more).
Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
