How to Create Special Text Areas with CSS in WordPress Post

Would you like to draw readers’ attention to certain text in your blog posts? One effective way to achieve this is by creating eye-catching and stylish text boxes. In this tutorial, I’ll show you how to easily create text boxes using CSS. We’ll create two classes, right_box and left_box, which will float the text boxes to the right or left.

Step 1: Creating CSS Classes

To begin, open your style sheet and add the following CSS rules for the right_box class:

.right_box {
    float: right;
    width: 200px;
    margin-left: 15px;
    border: 1px solid #FGFGFG;
    padding: 10px;
    background-color: #efefef;
}

Feel free to customize the width, margin, border color, padding, and background color to match your preferences.

Step 2: Defining the Text Box in the Post

Now that we have our CSS class, let’s proceed to create the text box within our WordPress post. Follow these steps:

1. Switch to the HTML mode of the Text Editor.
2. Locate the section of text you want to highlight and wrap it with a <div> element using the right_box class. For example:

<div class="right_box">
    This is the text you want to highlight.
</div>

3. Save your post.

Step 3: Verifying the Styling

To confirm that the text is being controlled by the CSS rule, you can check the status bar at the bottom left of the Text Editor while your cursor is within the highlighted text. It should display “path: div.right_box.”

Please note that you won’t see the div tags or the box effect in Visual mode while editing the post, as it doesn’t use the theme’s style sheet. However, when you preview or publish the post, the text box will be styled according to the CSS class you defined.

I hope this tutorial helps you enhance your blog posts and capture your readers’ attention with visually appealing text boxes. Happy blogging!