Quick Tip: Putting a quick border around an image

I was creating a blog post so that people could download a small poster that showed the 10 Rules for Effective Blogging.  The problem is that the background of the poster is white, as is the background for the blog, so by itself, it looks like this:

Better_Blogging_for_your_Business-10-Rules

Kind of bleeds into the page. I want a quick border. The built-in editor for WordPress doesn’t let you add a quick border to an image, so I need to add some style attributes to the image. As stated in the book:

Border: width style color;

The largest group of properties in style have to do with borders around an object. You can do a lot with borders. They are a great way to highlight or separate different pieces of content in a post.

Fortunately, the border property covers most needs. The first argument it takes is the width of the border in pixels. You can use words like thin or thick here as well. The next is style, which can be solid, dashed, double, etc… And finally, you give a color. Color can be a #rrryygg hex color or common names like black, red, yellow, etc…

This is a great example of applying a border.  So following my own advice I go into the HTML tab of my editor and find the image:

blog-img

And I want to add:

style="border: black thin solid;"

Between <img and class=.  Go back to to the “Visual” And look what I get:

Better_Blogging_for_your_Business-10-Rules

But… looking at the screen capture I inserted of the HTML code image I have the same problem.  So what I should do is set my images to always have a border. In the free cloud-based version of WordPress, you can’t change the styles settings.  Free always costs.

So this simple addition takes maybe 30 seconds, will satisfy my cheap approach for now.

If your blog platform allows you to change your CSS, then set your img to include:

img {
    border: black thin solid;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s