Home > Article > Web Front-end > How to change the case of text in a paragraph using CSS?
How to change the case of text in a paragraph using CSS?
- 王林forward
- 2023-08-26 21:01:04684browse
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;
}
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>
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!