How To Style The First Letter Of A Paragraph Using Css

Do you know you can style only the first letter of a paragraph? Yes you can.

When designing a website, there are many styles you can add to your webpage in order to make it look really good. Not just the images and layout but also the text which appears on the webpage.

To style the first letter of a paragraph using CSS, you can use the ::first-letter pseudo-element which is one of the many pseudo selectors in Css.

This pseudo-element targets the first letter of the specified element and allows you to apply special styling to it. Here’s an example:

Example 1

Html

So assuming we have a simple paragraph text in our Html  
<p class="main-text">
      Whenever you have a web site to design, always start by designing the
      mobile view of the website.
</p>

When you run the code above, your result should look like what we have below

So for us to apply specific styling to the first letter, we need to use the ::first letter pseudo selector in Css as shown below

Css 

 .main-text::first-letter {
      font-size: 2rem;
 }

You can see how we target just the first letter and how we applied styling to it, you should see the result in your browser looking similar to what we have below

In this example, we were able to style the first letter and by changing increasing the font size as shown in the picture above. When styling the first letter of a paragraph, you are not limited to only the font size alone, you can decide to add as much style as you want. So we would add more styles to the first letter of the paragraph in the next example.

Example2

Html 

<p class="main-text">
for you to be recognized as a web designer, you must have gotten a little knowledge of how thw web works and thats including its structure
</p>

Css
.main-text::first-letter {
      font-size: 3rem;
      color: orangered;
      font-weight: 700;
      font-style: italic;
    }

Again, the main point is how we can style the first letter of a text. Be it a paragraph text or a heading text, you can target and style only the first letter

You can customize the CSS properties within the ::first-letter selector to achieve different effects, such as changing the font, adding background color, applying text transformations, or any other styling options available for text .

Note that the ::first-letter pseudo-element only targets the first letter of a block-level element. It does not apply to inline or inline-block elements.

Let us use an inline element as an example

Html

<p class="main-text">
        for you to be recognized as a web designer, you must have gotten a
        little knowledge of how the web works and thats including its structure
      </p>
      <br />
      <br />
      <span class="main-text"
        >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat,
        alias!</span
      >
Css

.main-text::first-letter {
      font-size: 3rem;
      color: orangered;
      font-weight: 700;
      font-style: italic;
    }

You can clearly see that the two texts (paragraph and span). Both have the same class name and they are displayed correctly but the styling applied to them only affected the block level element which is the paragraph and it is not applied to the inline level element which is the span.

Hopefully you understand how to style the first letter of a paragraph using CSS. Also, the case where it will not be applied.