Make the First Character Uppercase in CSS

Decorating the text is the most common and important function while designing a web application. More specifically, the CSS “text-transform” property adjusts the text cases in HTML. However, in CSS, the pseudo-class is used with the selector to specify an element’s unique state. For instance, to select the first letter of the text of the block-level element, the “::first-letter” pseudo-class is utilized.

This post will guide you:

• How to Adjust Text Cases in CSS?
• How to Make the First Character Uppercase of “<p>” Element in CSS?
• How to Make the First Character Uppercase of “<a>” Element in CSS?

How to Adjust Text Cases in CSS?

The text cases are adjusted in CSS by utilizing the “text-transform” property. This property provides five different values:

• “capitalize” value is utilized to capitalize the first letter of each word.
• “upper” value makes each letter in uppercase.
• “lower” changes all letters in lowercase.
• “inherit” applies the text case of the parent to the element.
• “none” value does not change the text case.

How to Make the First Character Uppercase of “<p>” Element in CSS?

The CSS “text-transform” property with the value “capitalize” is utilized to capitalize the first letter of each word. However, we can use the “::first-letter” pseudo-class to capitalize only the first letter.

Let’s understand through the examples.

Example 1: Capitalize the First Letter of Each Word

In HTML, add “<p>” elements to specify some content in the document:

Style “<p>” Element

The “text-transform” property is assigned the value “capitalize” to capitalize the first letter of each word of the paragraph.

Output

Example 2: Capitalize the Only First Letter of the First Word

The pseudo-selector “::first-letter” is utilized to select the first letter only. For this purpose, access the “p” element with pseudo-class and utilize the “text-transform” property:

Output

How to Make the First Character Uppercase of <a> Element in CSS?

Let’s see how to capitalize the first character of the inline elements, such as the “<a>” element. For this purpose, add “<a>” elements and assign them the “class” and “href” attributes:

Style “a” Elements

Access the “a” element with the help of the class name “linux” and apply the “text-transform” property on them:

Output

As the “<a>” element is inline, they are adjusted next to each other in one line. To make their only first character uppercase and their display as block level, apply the CSS “display” property with the value “block”:

Now, use the “::first-letter” pseudo-selector along with the class attribute of “a” element to capitalize the first letter only:

The output indicates that we have successfully made the first character uppercase of the element in CSS.

Conclusion

To make the first character uppercase, first, add elements to the HTML document to specify some text content, such as “<p>” and “<a>” elements. The pseudo-selector “::first-letter” is utilized to select the first letter of the element’s text. Then, within the pseudo-class, apply the CSS “text-transform” property with the value “capitalize” to make the first letter uppercase. This article has explained how to make the first character uppercase using CSS.