Image may be NSFW.
Clik here to view.
Pro 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! Image may be NSFW.
Clik here to view.
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 Image may be NSFW.
Clik here to view.
I hope this tutorial was helpful for you. If you have any questions or need help with this, feel free to leave a comment.
