Text Transform

Exercise

  1. 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>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. In the "styles.css" file, replace the code with the following:
#uppercase {
  text-transform: uppercase;
}

#capitalize {
  text-transform: capitalize;
}

#lowercase {
  text-transform: lowercase;
}
  1. Save.
  2. In the browser, you should see the following:

  3. Exercise 2 Result

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:

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


Video and Code References


Questions? Subscribe and ask in the video comments:




GitHub and Other References