How to Make the First Character Uppercase in CSS


By squashlabs, Last Updated: October 6, 2023

How to Make the First Character Uppercase in CSS

To make the first character of a text string uppercase in CSS, you can use the ::first-letter pseudo-element. This pseudo-element allows you to select and style the first letter of an element.

Here are two possible approaches to achieve this:

Approach 1: Using the ::first-letter Pseudo-element

You can use the ::first-letter pseudo-element to select and style the first letter of an element. Here’s an example of how to use it to make the first character uppercase:

p::first-letter {
  text-transform: uppercase;

In this example, the ::first-letter pseudo-element is applied to the <p> element. The text-transform: uppercase; property is used to transform the text to uppercase.

Related Article: How to Use the CSS Parent Selector

Approach 2: Using the text-transform Property

Another approach is to use the text-transform property with the value of capitalize. This property can be applied directly to the element or to a specific class or ID selector. Here’s an example:

p {
  text-transform: capitalize;

In this example, the text-transform: capitalize; property is applied to the <p> element. This property capitalizes the first character of each word in the text.

Additional Suggestions and Best Practices

– The ::first-letter pseudo-element is more specific and allows you to apply more specific styles to the first letter, such as color, font size, or text decoration.
– If you want to apply the same uppercase style to multiple elements, you can use a class or ID selector instead of the element selector. For example:

  .uppercase {
    text-transform: uppercase;

Then, apply the class to the desired elements:

  <p class="uppercase">This is an example.</p>
  <h1 class="uppercase">Heading</h1>

– Keep in mind that the text-transform property only affects the visual rendering of the text and does not change the underlying text content. If you need to transform the actual text content, you may need to use JavaScript or server-side scripting.

Related Article: How to Apply Outline Effect to Text in CSS

More Articles from the Cascading Style Sheets (CSS) Guide series:

How to Use Media Queries for Desktop, Tablet, and Mobile

Guide on constructing CSS media queries to target various devices. This article provides step-by-step instructions on understanding media queries and targeting desktop,... read more

How to Style CSS Scrollbars

Learn how to customize scrollbars using CSS in this tutorial. Discover different use cases and best practices for styling scrollbars, ensuring consistent design and... read more