Text Transform
Exercise
- In the "index.html" file, replace the code with the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>Text Transform</h1> <p id="uppercase">all of these words will be uppercase</p> <p id="capitalize">first letter of each of these words will be capitalized</p> <p id="lowercase">ALL OF THESE WORDS WILL BE LOWERCASE</p> </body> </html>
- Save.
- If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
- In the "styles.css" file, replace the code with the following:
#uppercase { text-transform: uppercase; } #capitalize { text-transform: capitalize; } #lowercase { text-transform: lowercase; }
- Save.
- In the browser, you should see the following:
Code Walkthrough and Explanation
text-transform
In CSS, text-transform
property is used to specify how to transform the text characters, whether
to make
them uppercase, lowercase, capitalize, or have the first letter of each word capitalized. This property takes
several
possible values:
none
: This is the default value, where no transformation is applied to the text.uppercase
: This value will transform all characters in the text to uppercase.lowercase
: This value will transform all characters in the text to lowercase.capitalize
: This value will capitalize the first character of each word in the text.full-width
: This value will transform each character to its full-width variant.inherit
: This value will inherit the text-transform value from its parent element.
The text-transform
property can be useful for ensuring consistent capitalization or styling in
text
elements, and can help improve the readability of the content on a webpage.
Experiment with the Code
- Try making the
h1
elementuppercase
.
Video and Code References
Questions? Subscribe and ask in the video comments: