How to change the case of text in a paragraph using CSS?-CSS Tutorial-php.cn

How to change the case of text in a paragraph using CSS?

王林

Release： 2023-08-26 21:01:04

forward

686 people have browsed it

如何使用 CSS 更改段落中文本的大小写？

CSS (Cascading Style Sheets) is a powerful tool for controlling the layout and appearance of text on your website. In this article, we will learn how to change the case of text in a paragraph using CSS.

When it comes to styling text on a website, one of the basic and common styling options is to change the case of text, which we can easily do using the text-transform property in CSS. The text-transform attribute can take one of the following values -

"uppercase" will capitalize the first letter of each word in the selected element.
"uppercase" will convert all text in the selected element to uppercase letters.
"lowercase" will convert all text in the selected element to lowercase letters.

To change the case of text in a paragraph, first we need to select the paragraph element using a CSS selector. For example, to change the case of text in a paragraph to uppercase, we would use the following CSS -

p {
   text-transform: uppercase;
}

Copy after login

Example

The following is an example of using CSS to change the case of text in a paragraph.

<html>
<head>
   <title>Change the cases of text in paragraphs using CSS</title>
   <style>
      body{
         text-align:center;
      }
      .capitalize{
         color: blue;
         text-transform: capitalize;
      }
      .uppercase{
         color: red;
         text-transform: uppercase;
      }
      .lowercase{
         color: green;
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <h2>Change the cases of text in paragraphs using CSS</h2>
   <p class="capitalize">capitalize the first letter of each word in the selected element</p>
   <p class="uppercase">Converted all the text in the selected element to uppercase letters</p>
   <p class="lowercase">CONVERTED ALL THE TEXT IN SELECTES ELEMENT TO LOWERCASE LETTERS</p>
</body>
</html>

Copy after login

in conclusion

To change the case of text in a paragraph, the text-transform property in CSS is a great way to change the case of text in a paragraph.

The above is the detailed content of How to change the case of text in a paragraph using CSS?. For more information, please follow other related articles on the PHP Chinese website!