Styling Images in Posts and Pages

1 Styling All Images
2 Styling Specific Images
3 Styling One or Two Images Directly
4 Resources

Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image.

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment such as:

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" 
class="alignright size-medium wp-image-3109" 
height="25" width="30"/>

For more information on styling images in WordPress, see Wrapping Text Around Images. Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image.

Styling All Images

Styling your images from within the style.css of your WordPress Theme can cover the styling for every image on your site, or specific images.

To style every image on your site to look a particular way, look for or add the CSS selector for the image tag. Then add your styles to the tag. For instance, let's say that you want a black border around all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text.

img {
     margin: 5px;
     padding: 10px;
     border: solid black 1px
}

Maybe you want something a little more dramatic. You can change the border thickness and set it to a "double" line. And maybe you really want to isolate your image from the rest of the text, so you increase the margin around the image.

img {
     margin: 20px;
     padding: 10px;
     border: double black 1px
}

Styling Specific Images

You can add to your style sheet a specific style for certain images. If you have already styled all of your images, you must make sure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you do not change the margin, then it will remain the same in the new style. This is called the CSS Parent/Child Relationship.

Let's say you would like to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images should look the same, just the ones you add in your Nature category. You simply add a class to your style sheet and each image within that category.

To make it easy to remember, we'll call our class "nature". We want to have a very dark green thick border and a medium green background around the image to highlight it.

img.nature {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
}

On each of the images within that category, you simply add the class for "nature":

<img src="leaf.gif" alt="Red leaf" class="nature" />

If you need more styles for different images, you can create more of them as needed.

Styling One or Two Images Directly

There are times when you just want one or two images on your site to look different from the rest. This technique is called inline styles. It applies the CSS styles directly to the image itself.

For example, say you want to have an image isolated against a black background to call attention to it.

<img src="leaf.gif" alt="Red leaf" style="padding:20px; 
background: black; border: none" />

This is not a technique to use on every image. It is to be used on occasional images that need a "little something special."

Codex