Lesson 14: Text Transformation

❮ Previous Lesson Next Lesson ❯

In previous lesson, we have learned how to format text by specify font typeface and font size. In this lesson, we shall learn how to change case of text. Changing case is called text transformation in CSS.

we can transform text into uppercase, lowercase and capitalized text. The property to transform text is text-transform and the values are uppercase, lowercase and capitalize. Capitalize means the first letter of each word appears as capital letter. The syntaxes are illustrated in the following example:

p { text-transform: lowercase}
h2{text-transform: uppercase}
#section{text-transform: capitalize}

Example 14.1

<html>
<head>
<style type="text/css">
p { text-transform: lowercase}

h2{text-transform: uppercase}

#section{text-transform: capitalize}
</style>
</head>
<body>
<h2>What is CSS ?</h2>

<p>CSS works together with HTML elements using a set of rules to control the look of a webpage
such as background colour, font typeface, font-size, line spacing and more .
The rule of CSS comprises two parts, the SELECTOR part and the DECLARATION part.</p>
<span id="section">The selector is an HTML element and the declaration specifies rules to be adhered to the HTML element
defined by the selector. The selector can define more than one HTML elements, separated by commas.
You can also have more than one declaration, each separated by semicolons.
A declaration consists of two parts, the property and its value.</span>
</body>
</html>

The Output

What is CSS?

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background color, font typeface, font size, line spacing and more. The rule of CSS comprises two parts, the SELECTOR part, and the DECLARATION part.

The selector is an HTML element and the declaration specifies rules to adhere to the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declaration, each separated by semicolons. A declaration consists of two parts, the property, and its value.

Notice that the heading has been changed to uppercase, the first paragraph has been changed to lowercase and the first letter of each word in the last paragraph has been capitalized.

❮ Previous Lesson Next Lesson ❯