CSS – First letter of a paragraph larger than the others

CSS - Cascading Style SheetsPro Blog Design had an article about formating blog posts for readability the other day. As we discussed further methods of styling your blog articles, we started talking about „the concept of making the first letter of a paragraph larger than the others„.

I then decided to give this technique a try on my blog and we continued talking about it, which helped me to tweak my CSS code to make this „magic“ happen. The code for this „magic trick“ was posted as comment, but I think it is better to put it into an extra tutorial article although it is nothing special if you know how to use Cascading Style Sheets.

There are two methods to achieve the goal, I will tell you how to do it and mention the advantages and disadvantages.

First method

div.entry p:first-letter {
font-size:1.5em;
font-weight:700;
text-transform:capitalize;
}

This one will auto-add the „first letter of a paragraph larger than the others“ effect, which saves you a lot of time. Unfortunately you are not able to not use it in an article. The effect will be always created. If you only write articles and it works for your design and style of writing, great! 🙂

In my case I have a problem when I post a story like my Soldiers vs. Jedi. So I had to look for an alternate way.

Second method

div.entry p span.c_letter {
font-size:1.5em;
font-weight:700;
text-transform:uppercase;
}

How do you enable the effect now?
You just have to wrap a <span class=”c_letter”> around the letter you want to capitalize and you get that effect. This will only work if the span is inside a paragraph:

e.g.:
<p><span class="c_letter">T</span>he first letter is huge[…]</p>

This method allows you to decide if you want to have a capital letter or not. However, it requires you to spend some time on wrapping the code around the letter.

So you need to see which method works best for you.

#1 Note: The first method will also edit your older blog posts, so if you don’t want to „auto-edit“ them, you should use the second method.

#2 Note: Maybe you noticed the text-transform:uppercase; piece in the second method. It means that even a non-capital character will be shown as capital character. I added in case you could use it for highlighting a word without actually writing it in capitals. You may remove it if you don’t want it 🙂

I hope this tutorial was helpful for you. If you have any questions or need help with this, feel free to leave a comment.

9 Gedanken zu „CSS – First letter of a paragraph larger than the others

  1. very interesting, I never thought of doing this.
    I really like how your subcategories here have little icons fro them. I still can’t even get my sidebar categories on my mommy site to toggle- michael worked on it with me for awhile. I think it has something to do with K2 so I’m going to switch tweaked formats when I actually get the time.

  2. those icons are easy to create. There are nothing else than the list item icons generated by the CSS. I will write an article about it so you know how to use the default icons and how to add your own images.

    For the category toggle I modified the template and used php. I think I will also write an article about this.

    Thanks for giving me some ideas 🙂

  3. hm…could be true, but I guess it is the choice of the author. My intention is to allow the user to scan through the text and discover each new paragraph easily.

    As I’m open for experiments I may test your suggestion in a few posts and see how it looks like. 🙂

  4. Pingback: Some Readers’ Links | Webmaster-Source

Schreibe einen Kommentar