How to Create Special Text Areas with CSS in WordPress Post

If you want to get attention of you blog reader in any particular post for certain text, you can create a frame or box for that special text. It is very simple and easy to create a boxes using some CSS.
Create a CSS class in your style sheet, so you can use it over and over again on the site. Lets make a class “right_box” beacuse I am making it float right of all other text. I could then make a class called “leftbox” for when I want the frame to float to the left.

In my CSS rule for rightbox I do the following:
float: right;
width: 200px;
margin-left: 15px;
border: 1px solid #FGFGFG;
padding: 10px;
background-color: #efefef;

After creating a rule in style.css, create a text box in your post. Switch to the HTML mode of Text Editor and define your class.

. Save your post and see the result as follow:

You will not see div tags in Visual mode while editing the post, and you will not see the box effect because Visual mode does not display posts using the theme’s style sheet. However, you can verify the text is being controlled by the CSS rule by checking the status bar at the bottom left of the Text Editor while your cursor is anywhere in that text. It should say “path: div.right_box.”

Reference: WordPress® 24-Hour Trainer By George Plumley