• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How to Create Special Text Areas with CSS in WordPress Post

Avatar of Noor Mustafa Raza Noor Mustafa Raza August 17, 2023

black background with text overlay screengrab
Photo by Pixabay on Pexels.com
FacebookTweetPinLinkedInEmailPrint

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.

Table of Contents

  • Step 1: Creating CSS Classes
  • Step 2: Defining the Text Box in the Post
  • Step 3: Verifying the Styling

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>
  1. 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!

Related Tags: CSS Boxes Special Text Areas

FacebookTweetPinLinkedInEmailPrint

Related Stories

  • How To Use HTML5 With WordPress Theme Development

    How To Use HTML5 With WordPress Theme Development

  • Everything You Need for a Successful Online Retail Store

    Everything You Need for a Successful Online Retail Store

  • A Guide to Augment Your WordPress Site in 10 Simple Steps

    A Guide to Augment Your WordPress Site in 10 Simple Steps

Avatar of Noor Mustafa Raza

Noor Mustafa Raza

Ex-Editor in chief

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Reader Interactions

Join the Discussion
  1. Avatar of KrisKris says

    September 13, 2012

    Hi,
    I’m having problem with adding thisto my post. Could you write step by step what should i Do ??
    Regards,
    Kris

    Reply
    • Avatar of Wordpress ArenaWordpress Arena says

      September 15, 2012

      can you elaborate what issues you are having? so I can help you. As well I can fix this for you

      Reply

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

Why and How To Turn OFF Disqus Comments on Custom Post Types

Blockchain written on a sticky note

How Blockchain is changing your WordPress website

Recent Topics

  • Top Premium WordPress Plugins & Themes
  • How to Improve WordPress Navigation Menu
  • Publishing Blog Posts via Email: WordPress and Blogger
  • Ultimate Guide to Managing WordPress Multi Sites
  • 27 Top SEO Companies in the World

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!