Create attractive first character in paragraph using CSS

I was talked about “Less used properties in CSS” in a blog post previously. Today I will talk about a property less known too, in CSS you can target the first letter in your paragraph without using <span> to target the letter.

In your HTML paragraph you can target the first letter using a special CSS pseudo element named ::first-letter for example if you want to make your paragraph first letter Bigger and Red maybe..

First Letter Css 1 300x131
example of what we will do

Let’s try a practical example

The HTML Part

dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley

Now let’s try to target the first letter in the previous paragraph using the ::first-letter pseudo element.

The CSS Part

p::first-letter {
    float: left;
    font-size: 3em;
    font-weight: bold;
    line-height: 3em;
    margin-right: .3em;
    text-transform: uppercase;
    color: red;

Above we targeted the first letter in all our HTML paragraph, we make it left with specific size and transform and red color.

In addition to that note use a single colon :first-letter Internet Explorer 8 and down.

Example in Action

Check this link to see our example in action:


Leave a Reply

Your email address will not be published. Required fields are marked *