The Crazy Tree Press

Using CSS Inline to Create an Accent Box

This post will teach you to use inline CSS in your WordPress posts and pages.

CSS Inline Rules to Create Accent Box

The first thing I learned when teaching myself web design was how to do basic HTML, the next thing was CSS.

CSS is the coding language that determines the “look and feel” of pretty much everything you see on the web today.

The letters you’re reading right this second are affected in many ways by css. Including:

  • The color of the letters
  • The font used for the letters
  • Whether they are bold or italic or underlined
  • The space between lines (not shown)
  • What happens when you hover your mouse over a word {see}

And so much more. CSS is very versitile and worth learning even for a part-time blogger because of the flexibility you gain by understanding what’s going on.

For example, say I want to create a box inside my post area with additional content, much like you would see in a magazine article. Like you see to the right here.

What’s a DIV?

A DIV is an HTML element that us essentially used as a container to break-up and usually name components within a larger whole. To put it in terms my sons would understand, try thinking of it this way:

<div id="refrigerator">
  <div class="top shelf">
     Lunch Meat
  </div>
 
  <div class="door">
    Drinks!
  </div>
 
  <div class="bottom shelf">
    Leftovers!
  </div>
</div>

As you can see, a DIV tag is used to open or start the container and then one with a / at the beginning “closes” or ends it. You must be careful to always close your HTML tags or your site might get really confused or break.

In the demonstration above I used ID’s and Classes just so you could visualize the way DIV’s are individual items within your content, one inside of the other. You don’t always have to name them. In fact, the only reason you normally would name a DIV is so you can refer to it later.

A stylesheet such as style.css might, for example say “make the refrigerator red and the lunchmeat bold then underline the leftovers”, using CSS code of course.

This can be done very quickly right in the body of your post. No editing of your theme’s style.css sheet is required. Just use inline css.

Start with a DIV Container

The little box to the right both demonstrates what we’re learning to do and teaches you what a DIV is and how it works.

Just Add Inline CSS Styles To The DIV

The code below is what created the box to the right.

<div style="width:250px;margin:20px;padding:10px;background:#efefef;border:4px solid #e9e9e9;float:right;">
... your content...
</div>

Here are the elements one-by-one:

  • Width – kind of obvious right, it’s how wide the box is.
  • Margin – margin is the area outside of the div where nothing should be… think of it as the space you want everyone to stay away from your iPad.
  • Padding – This is the area around the peremiter of the inside of your DIV that should have no content, think of it as the solid black bar around the screen on your iPad.
  • Background – Here we’re adding a color. There is much more to learn about the background element. It can be an image, a pattern, transparent, and more.
  • Border – The solid line around the edge of your DIV – first I tell it how wide to make the border, then what style such as solid, dashed, or dotted, then I tell it what color using a hexadecimal color code.
  • Float – This tells the browser that we want this whole containter (the DIV) to be on the right side of the container it is within (the WordPress post) and that we want other content to wrap around it on the left.

So now anything we put within that DIV will be part of that section on the page. So if we center a picture or text it will be centered within that section only.

Use For One-Off Styling

You can style anything in this manner, but for things that will happen over and over again, or for pages with large amounts of custom css work, you should identify ID’s and classes and then use a stylesheet for defining css rules for those items.

The reason for this is that CSS on a stylesheet can be edited in one place and tools such as Firebug describe exactly where to find the code if you want to change it. Inline CSS can be much harder to find.

It’s best used for one-shot design work.

Like boxes just like this one!

Leave a Comment

*