Hey—want some one-on-one help getting this set up? Book a 20-minute consultation and we can work through it via video chat!
This post assumes basic understanding of CSS. If you’re new to CSS coding or need a refresher, I recommend starting over here at my CSS Basics for Bloggers post, and then coming back to this one!
When creating a blog post or web page, there’s typically a paragraph or two you want to really stand out from the rest. Maybe you want to put it in a box, make the font bigger, or change the font entirely. But coding that each time with HTML can get exhausting and time-consuming.
Good news! It’s really easy to emphasize text with CSS.
How to Emphasize Text with CSS Paragraph Styling
In order to emphasize text with CSS, you’ll want to create paragraph styles. You can adjust the spacing before or after a paragraph, the background color, the stroke, etc. when you edit the styling of a paragraph. This is really helpful for making a chunk of text stand out on your page!
I personally use this for things like quotes, calls to action, promotions of products I’m selling, my affiliate disclosure, and more.
Creating CSS Classes
In order to edit a paragraph’s style, you’ll need to create a CSS class. You can name your classes whatever you want, as long as there are no spaces. Letters and dashes are all fair game!
Then, you edit the CSS of each class in your Edit CSS panel in WordPress (Appearance > Edit CSS).
I like to create multiple classes for each specific paragraph style I’m making, so I can easily change them up. When typing up the CSS code, you’ll use the class as your selector, with a period at the beginning. So, if I were to edit the CSS of the class “disclosure,” the CSS would look like this:
.disclosure {
padding: 10px;
background-color: #fcf2f1;
text-align: center;
border: 1px solid #f1bbb7;
}
Once I have the CSS written up and saved, I need to identify what paragraph(s) should use that class. In order to do that, I’d go into my blog post and put the HTML around whatever paragraph I want to apply the disclosure style to by adding <p class=”disclosure”> to the front of the paragraph and </p> to the end to close the paragraph up.
Note: Organizing Your CSS Classes
There are a few ways you can create classes. If you have a few basic styles you know you want to use, you could create classes for each. For example, since I have pink boxes around some text, grey boxes around other text, blue boxes around other text, etc., I could create CSS classes for “pink-box,” “grey-box,” “blue-box,” etc. However, I recommend taking a different approach: creating a CSS class for each type of call-out.
For example, I use the class “disclosure” for my affiliate disclosure paragraphs, instead of “grey-box.” Then, if I ever decide to change up how my disclosure box looks, I just need to change the class “disclosure.” If I used “grey-box,” I would need to go into each post that uses <p class=”grey-box”></p> around my disclosure and change it to <p class=”pink-box”></p> or whatever new look I want to give to it.
Creating a CSS class for each instance might be more work up front, but it will make your change management process a lot easier!
Using CSS Classes with Shortcodes
Another thing that makes your change management process easier is using shortcodes. I talked about shortcodes in this blog post, so if you’re unfamiliar with the concept, I recommend checking it out!
In order to save time, create a shortcode for each item of recurring text and stylize them with a CSS class. For example, my “disclosure” class is used with my “disclosure” shortcode. This will speed up your process because you don’t need to remember what your CSS classes are called, and you don’t need to go into the Text Editor of WordPress each time you want to emphasize text with CSS!
So there you have it! CSS classes can speed up your process and make it really easy to emphasize text with CSS.
