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.
Listing1: Showing the CSS text-transform
<!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:
Listing 2: Snazzing up your text with more CSS attributes
<!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).
About the Author
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.
