Stylized Paragraphs

Recently I’ve decided that setting my paragraphs apart by using CSS, specifically selectors and the property attribute makes it that much cooler. I mean it’s possible it doesn’t, and I’m just full of myself, but I guess I’m willing to take that chance.

Now what I use presently on my blog is a DROP CAP, NOT the first-letter selector or text-indent property. I may decide I’ll cover drop caps in depth at a later point, but today we are aiming to start small and then work our way up.

There are two ways that you can stylize your paragraph that are both simple and easily doable; meaning copy paste code and throw it into your stylesheet without have to think about it.

The two ways to alter your paragraphs is by using indents and also by altering the way the first letter in a paragraph looks, known as first-letter. I felt that it adds a bit of uniqueness to posts and it makes it easier for readers to discern where a paragraph ends and starts.

Since styling my paragraphs, I’ve actually gotten a fair a number of requests asking how to do it. I’m going to go out on a limb and just assume that Google is down for these people or their keyboard is failing or, and really the only valid excuse, they’ve lost all ability to use their hands. Otherwise, GOOGLE IS YOUR FRIEND.

Anyway, despite my annoyance at people’s refusal to use the powerful Google search, which I’ll point out, I didn’t have as a reference when I started to learn how to code; I figured I’d be nice and let you in on my little secret.

Lesson 1: The text-indent Property

First off, if you’re not familiar with CSS or coding in general, do yourself a favor and learn. You don’t necessarily need to become a guru but at least get familiar with the basics. As much as I’d love (not really) to teach it to you, I simply do not have the time nor the patience to invest in something that is quite easily learned through some research.

If you are however familiar with CSS, let’s get started! 😀

The first thing you’ll want to do is add an indent to your paragraph by using the paragraph tag or in this case <p>. Once you’ve done that, you want to style it by adding the property text-indent. Similar to this:

p {
     text-indent: 25px;
 } 

This code will add an indent to the beginning of each of your paragraphs that looks like this:

No idea. Just do what I do: hold tight and pretend it’s a plan. Yes, well, it’s a brilliant noise. I love that noise. There’s something that doesn’t make sense. Let’s go and poke it with a stick.11. Added italics to separate the example from the post content.

Lesson 2: The first-letter Selector

Now, if you want to get a bit more in-depth, and you’d like to stylize the first letter of each paragraph to further discern endings and beginnings, you’ll want to add a class selector to your CSS, using the pseudo element p:first-letter and style appropriately.

I set the example below to:

p:first-letter { 
font-family: Cherry Swash;
font-size:120%;
color:#ED7130; } 

Coupled with my text indent, this will output the following for each paragraph:

People assume that time is a strict progression of cause-and-effect… but actually, from a non-linear, non-subjective viewpoint, it’s more like a big ball of wibbly-wobbly… timey-wimey… stuff.21. Added italics to separate the example from the post content.

Now if you want it so it ONLY affects your entries and not your comments, you’ll have to target the class associated with your entries. In my case I have it set up as:

.entry-content p:first-letter {
font-family: Cherry Swash;
font-size:200%;
color:#ED7130;
}

So there you have it, my not so secret way to style paragraphs! I’d tell you to leave any questions you have in the comments or e-mail them to me, but it’s likely my response will be GOOGLE IT, so it’s probably best you not bother. 😏

2 thoughts on “Stylized Paragraphs

  1. Brandy Hall

    This is definitely something that I might possibly use in my Blog. Thank you for sharing!

    Reply

  2. Karin

    I like the first-letter selector. Still haven’t had a chance to use it in a live project, but it’s such a nifty little thing!

    And people asking instead of just googling things is one of my pet peeves! If you had time to write that whole question down and push “send” you probably had time to type the exact same thing into Google and have it give you the answer directly… 😅
    Karin recently posted…#aprilfae art challenge 2019My Profile

    Reply

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.