There are many different ways that you can style plain images with CSS. This is very useful for normal web development but probably more so for content publishing. If you’re like most content publishers, focusing on your writing rather than web programming, then here are four simple tricks for styling images withing your content.

Note: All of the example images are “floated” and have margins applied to push text away from them. I left that out of the code examples for simplicity.

1. Wrapping Text

The most basic of image styling techniques, wrapping text around images, can be done with one simple CSS addition. A normal image HTML tag will be written like:

<img src=”/path/to/image.jpg” />

This will display the image fine, but it will push all text to the bottom of it. If you want your text to wrap around the image, simply add a float style attribute to your image tag like so:

<img src=”/path/to/image.jpg” style=”float: right;” />

That’s it. If you want the image to be left-aligned, you would obviously change the property to “float: left;”

2. Single Border

More often than not, rectangular content images look odd without some kind of border. You could add a border in your image editing application, but it is much easier (and more flexible) to add the border with CSS. Simply add more styling to your image tag:

<img src=”/path/to/image.jpg” style=”border: 2px solid #f5e53e;” />

In this example, we have used the shorthand border property. The first value “2px” sets the width of the border, the second value “solid” defines the type of border, and the final value “#000000″ defines the color of the border. Check out w3schools for a list of all CSS border properties.

3. Double Border

What if you want your images to have a double border effect? Well, CSS only allows you to specify one border, but you can still make it happen. What you need to do is set a background color (inner border color), padding (inner border width), and outer border properties. Here we go:

<img src=”/path/to/image.jpg” style=”background-color: #f7d8a9; padding: 3px; border: 1px solid #6f3d29;” />

The only limitation of this method is that you cannot specify border styles for your inner border. You could, however, specify a background-image for it.

There are many things you can do with this technique, one of them being a polaroid effect. To achieve this, simply set the padding options independently so that you bottom padding is larger than the rest: “padding: 2px 2px 10px 2px;”

4. Image Captions


Before the tornado…

This technique builds upon the “polariod effect” that was just mentioned. We are going to include text within the inner border of the image. It requires a bit more HTML though. You need to enclose both your image and your caption inside of a container (a “p” in this example) and apply styling to that container. Here is an example:

<p style=”border: 1px solid #cccccc; padding: 6px; text-align: center; width: 125px;”><img src=”/path/to/image.jpg” />Caption text goes here.</p>

You may have noticed that I also specified a width for our container. There are other ways to do it, but hard-coding a width in there is the easiest. This image is “125px” wide, so I set the container to that width. Also, everything has been centered inside that container with “text-align: center;”

Other Not-So-Simple Techniques

There are tons of cool things you can do with images and CSS, but many of them require external stylesheets and wouldn’t work well within this blog post. Here are some of my favorites:

Conclusion

There they are, four simple techniques and four not-so-simple techniques for styling images within your content. Many of you might already be CSS experts, but I am pretty sure there are people out there wondering how to make images look attractive within their blog posts and other content.

Do you have any other tricks that you like to use for styling images? Do you think it’s easier to do this stuff with tables instead of CSS? Leave a comment and let us know.