Part two of: “Stylizing Your Content.”

Okay, so you’re not a designer nor do you know very much about code. That’s fine. We’ll keep it simple (for now) and show some ways to beautify your stock looking content. We’ll put a dress on it, give it a nice waxing, clip its nails, find it a date and send it on its merry way. However, we don’t want to over do it, which is why we left off the makeup. We still want to remain natural. We just want to emphasize it a little bit - show off the top notch information that spews from your brain to the screen. Let’s move.

Note: These tips offer a very broad outline on what can be done but don’t go into technical depth (that would run-on for pages and pages). However, in upcoming features I will be tearing apart each one on its own so don’t worry if you still don’t “get it” after reading this post. ;o)

Styling Headers

There are two different types of headers, the papa header (this is the title of your post) and the baby headers (there can be many of these - they’re the ones that differentiate the sections/thoughts/points in your posts).

You want to make sure that they decrease in size in the correct order and that they also change color slightly as they decrease.

This is a <h1> header.

This is a <h2> header.

This is a <h3> header.

You can go further by adding a <h4>, <h5>, etc., but I find it to be pretty useless. After <h3> I tend to just use <strong>. However, you can use <h4>’s and <h5>’s to call attention to certain points. For instance, say you have a healthy foods blog and in every post you have a section where you list an unhealthy alternative to the Garden Pizza you just posted about. You can call it “Porker Alternative,” and wrap that title in a <h4> tag and style it to show a little image of a piglet in front of it.

Adding Images

There are a few different routes you can take:

• Flickr - Skellie has put together a fantastic two part guide: A Complete Guide to Finding and Using Incredible Flickr Images and The Flickr Guide, Part 2: How to Caption or Credit Photos in Posts.
• iStockphoto - This can very quickly become expensive if you do it for every post, but it’s a great way to add flair to say, a pillar article.
• Illustrate your own - Tony Clark is the man to beat.

Make sure you properly align the images and try adding a small border around them to give it a more polished look. If you add a border to all your post images by default using css, make sure you also create a “noborder” class and use that for the images that don’t need a border.

Styling Paragraphs

In the first part of this series, I took away all the styling from the post and what was left was a hard to read mess of words. You can see the difference with this post.

• font
• color
• size
• line height (the spacing between the sentences)
• margin and padding

Pay attention to all of these things, don’t just grab a theme and leave it as is…you don’t want your content to get lost in a sea of Grid Focus (great theme but man, I’ve seen it everywhere lately).

Don’t forget to Style your blockquotes.

• And your lists
  • but,
  • the default is usually
    • just fine. ;o)

Styling Links

For the most part links should look like links but there are many variations that can be done to kick it up a notch. Jonathan over at Pixel Acres has a great breakdown of the different ways you can approach styling links.

Highlighting Information

Nick over at Put Things Off likes to highlight key information by separating it from the rest of the copy. In the image to the right he has something called “An Aside” and surrounded it in a nice blue box that’s indented from the rest.

When readers stop by to skim your posts, this will give them a good idea what the post is about and very often pull them in to reading more.

You can add…

…all kinds of…

…different colors to distinguish different meanings…

…such as, “Alerts,” “Information,” “Downloads,” etc…

Whatever you do to get your copy to visually stand out, don’t let it distract you from writing great content. Once the King is looking good, let the queen come in to make it perfect.

What are some things you do to make your copy visually appealing?

See you soon for an in-depth “anybody-can-do-it-guide” to accomplishing each of these aspects.