Style First Letter, Word, Line and Paragraph with CSS and jQuery

In this tutorial, I’m going to show you how you can style the first letter of a word, the first word of a paragraph, the first line of a paragraph and the first paragraph on a page.

Style the first letter

To style the first letter of a word, we can use the pseudo-element, p::first-letter: The css code below will make the first letter of each paragraph to have a size of 28 pixels.

p::first-letter { font-size:28px; }

Style the first word

To style the first word of a paragraph, we need to use some jquery code, since we don’t have a pseudo-element for this one. Here’s how you can accomplish it:

$('p').each(function() {
    var word = $(this).html();
    var index = word.indexOf(' ');
    if(index == -1) {
        index = word.length;
    }
    $(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
});

And now we can simply use the .first-word class to style the first word of each paragraph:

.first-word { font-style:italic; }

Style the first line

To style the first line of a paragraph, is easy, since we have a pseudo-element for this:

p::first-line{ color:red; }

Style the first paragraph

And again, we don’t have a pseudo-element for this one, so we need to use a little bit of jquery:

$("p:first").addClass("first-paragraph");

And now we can use the .first-paragraph to style it:

.first-paragraph { background-color:#BDAA28; }

I hope this tutorial helped you learn how to Style First Letter, Word, Line and Paragraph with CSS and jQuery, if so, don’t forget to follow me on twitter @andornagy so you don’t miss out on other awesome tutorials like this!