Transforming Text with CSS uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects. 

In this tutorial, we will explore how you can give your web page something extra by creating what we call a “text transform” to specific text in your web page. We’ll examine what it takes to do a simple layout so that you feel comfortable with each text transformation. All you need to start with is a simple code editor such as Notepad which is free.

The Essentials of Text Transforming

Quite simply, text transform does three things. It converts the case of letters to uppercase, lowercase, or capitalized.

There are three values that you can use:

ValueDescription
uppercaseAll characters are converted to uppercase.
lowercaseAll characters are converted to lowercase.
capitalizeThe first character of each word is converted to uppercase. Other characters remain unchanged.

Capitalizing Text

Using this method of text transform can be specifically helpful in the use of headings and titles in your web page using the text transform capitalize CSS.

div { text-transform: capitalize; }

Note: I have bolded the text and added a font size of 16pt for better representation.

See the example below:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 16pt;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur.</div>

</body>
</html>

The result is this:

Creating Uppercase Text

What happens when “text-transform: uppercase;” is used instead.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16pt;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur.</div>

</body>
</html>

The result is this:

Creating Lowercase Text

What happens when “text-transform: lowercase;” is used instead.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-transform: lowercase;
  font-weight: bold;
  font-size: 16pt;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur.</div>

</body>
</html>

The result is of course, all letters being lower case. 

Creative Example

Imagine you have written a page where you want the user to experience something really unique when they hover over a set of words. In this case you could add in the following. 

<!DOCTYPE html>
<html>
<head>
<style>
p:hover {
background-color: red;
text-transform: uppercase;
font-size: 14pt;
}
</style>


</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur.</p>

</body>
</html>

You first see this on your web page:

And then as the user hovers over the words, the text transforms with a red background and all uppercase lettering.

This shows you the unlimited possibilities you have with utilizing text-transform along with other interesting CSS properties. CSS is a powerful tool.

Final Tips

Always remember to experiment and see the results on your web page before you take your web page live to your audience. Also we encourage you to combine these text transform features with other amazing CSS techniques. As you saw from the code above, we added in font-size, and font-weight to make the text more readable. Simple solutions can bring great results to those who visit your web page. Always keep your audience in mind to assure a user-friendly experience. 

Where to Next?

This introduction to CSS Text Transform should provide a starting point for further inquiry into text design, layout, and practical applications with HTML and CSS. 

We’ll continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!

<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>