CSS Text Transformation
The text-transform property changes the capitalization of text without altering the underlying content.
The <text-transform> property controls the case of text as it is displayed. The change is purely visual, so the original text in your HTML stays exactly as written, which keeps it correct for screen readers and copy-paste.
The values
Uppercase labels
<!DOCTYPE html>
<html>
<head>
<style>
.label {
text-transform: uppercase;
}
</style>
</head>
<body>
<span class="label">new</span>
</body>
</html>Capitalizing titles
<!DOCTYPE html>
<html>
<head>
<style>
.card-title {
text-transform: capitalize;
}
</style>
</head>
<body>
<h3 class="card-title">the daily forecast</h3>
</body>
</html>Note: capitalize only affects the first letter of each word. It will not fix an all-caps word or apply proper title-case grammar rules.
