This post will show you to style the first letter of the first paragraph in your WordPress blog. I repeat the famous quotation “The first impression is the last impression.” That is why the popular newspaper, magazines or websites use the style on its first letter to catch the eye of the viewers. You can see a live example on this WordPress blog. We have style our first letter with some background that gives you a better look I think.

styling first letter on wordpress

Do you want to style your first letter with your own color and styling? Follow the below steps to complete the task. I will discuss three types of styles dropped, raised and reversed. I am using the reversed styling for this blog. You may use your favorite style, and installed in your WordPress theme.

In this method, I will use a <p> selector with a pseudo-element first-letter along with our values. These are belonging to CSS 1 that is why supported by all the browsers. Therefore, here is a quick guide to style your first letter in your WordPress blog. Choose any one CSS code among three styling, and paste to your style.css (Appearance » Editor » style.css) theme file.

Styling First Letter in WordPress Blog

  1. Dropped Style First Letter:

    In the dropped style, the baseline of the initial letter is below the baseline of the body text. Here is a CSS for dropped styling for your first letter.

    p.dropped:first-letter
    {
        color: #CCCCCC;
        float: left;
        font-size: 400%;
        height: 54px;
        margin: 5px 0 0;
    }
    
  2. Raised Style First Letter:

    In the raised style, the top of the initial letter is above the height of the body text. Here is a CSS for raised styling first letter.

    Simple Advanced
    Code
    p.raised:first-letter
    
    {
        color: #CCCCCC;
        font-size: 300%;
        font-weight: bold;
        line-height: 0.8;
        padding: 0 5px 0 0;
    }
    
    p.raised:first-letter
    {
     color: #CCCCCC;
     background: #E9E9E9;
     border: 2px solid #FFFFFF;
     border-radius: 50%;
     box-shadow: 0 0 10px -2px #999999;
     font-size: 300%;
     line-height: 1.0;
     margin: 0 5px 0 0;
     padding: 0 7px;
    }
    
    Preview first letter big style your first letter
  3. Reversed Style First Letter:
    In this style, the initial letter has a background. Here is a CSS for reversed styling first letter.

    p.reversed:first-letter {
    background-color: #CCCCCC;
    color: #FFF;
    float: left;
    font-size: 48px;
    margin-right: 10px;
    margin-top: 7px;
    padding: 16px;
    border-radius: 50%;
    box-shadow: 0 0 10px -2px #999999;
    border: 2px solid #FFFFFF;
    }
    

Now, what is the way to call this CSS into your WordPress posts or pages? Look around any CSS styling, you will find this common p.variable:first-letter { Values }, where variable can be dropped, raised or reversed. Write full post in your WordPress as you normally do. Once you finished the writing go to HTML version of your post and make your first paragraph like the below code.



Your first paragraph inside your WordPress blog

Make sure to change variable with the dropped, raised or reversed whatever you choose to paste in your style.css.

You may paste all three styling to your theme style sheet, when you want to use them, only change the class name in the above code.

NO COMMENTS

Leave a Reply