css
  1. css-text-transform
PreviousNext

CSS Text Transform

The text-transform property in CSS modifies the capitalization or case of text within an element, allowing you to change how the text is displayed.

Basic Usage of the text-transform Property

The text-transform property can take several values:

  • text-transform: none;: Default behavior, displays text as it is.
  • text-transform: uppercase;: Converts text to all uppercase.
  • text-transform: lowercase;: Converts text to all lowercase.
  • text-transform: capitalize;: Capitalizes the first character of each word.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .transformed-text {
    text-transform: uppercase;
  }
</style>
</head>
<body>

<p class="transformed-text">This text is transformed to UPPERCASE.</p>

</body>
</html>
Try Playground

Benefits of Using text-transform Property

  • Consistent Text Appearance: Maintains a consistent text case or capitalization across the content.
  • Visual Variety: Offers different text appearances without changing the actual content.

Best Practices for Using text-transform

  • Appropriate Use: Apply text transformations thoughtfully, considering the context and readability of the content.
  • Semantic Structure: Use text-transform to enhance visual aesthetics without compromising the semantic structure of the text.

Understanding and utilizing the text-transform property provides control over the capitalization or case of text elements, allowing for consistent and visually appealing text representation in web design.

Text DecorationLetter Spacing
Published on: