How to Style Images On Your WordPress Website With CSS

I’m sure you already have an idea of how important images are to the success of your website.

But when it comes to boosting engagement (and ultimately your bottom line), it’s not just about including images on your site, it’s about what images you include and how you present them.

In this post I want to tackle one important piece of that puzzle: the presentation.

WordPress comes pre-packaged with simple means of styling images with CSS. You have the power to create different effects for the various CSS classes that WordPress automatically assigns to images on your site. (If it seems like I’ve started talking in a foreign language, don’t worry, I’ll explain everything in detail later in the article.)

I’m going to start by delving into the reasons why images are so important to your site, then move on to cover the default CSS classes that WordPress applies to images, and finally demonstrate how you can use CSS to apply custom styles to your images.

Why Images Are So Important for Websites
A WordPress CSS Crash Course
How to Add Custom CSS to WordPress
The WordPress Default CSS Image Classes
Simple Image Styling With WordPress
More Examples of What You Can Do With Image CSS in WordPress
What About Existing Styles?
The Sky’s the Limit

Why Images Are So Important for Websites

What better way to explain how beneficial images are to blogs than by proving it with an image?

Courtesy of MDG Advertising

Things get even more interesting when you get down to the biology of how we process information. Consider for example that 90 percent of information transmitted to the brain is visual, and 40% of people respond better to visual information that plain text (source: Zabisco).

But let’s be honest: I don’t need to throw statistics at you to make my point. You know from your own habits that visually appealing websites and blogs are far more likely to grab your attention than a mass of text. Images add color, appeal and intrigue. They fire off a bunch of reactions in our brain before we’ve even had a chance to start reading.

Put simply, if you’re not including compelling, relevant imagery within your blog posts, you are nowhere near close to making the most of your content. Going the extra mile when it comes to including images in your blog posts and presenting them well can make all the difference to engagement, traffic and sales.

A WordPress CSS Crash Course

The WordPress core developers are only too aware of the importance of images for websites, which is why they afford theme developers (and theme tweakers) a great deal of power and flexibility in determining how images are presented.

That power and flexibility is offered in the form of a number of CSS classes. But before we go any further, let’s take a moment to give you an understanding of what CSS is and how you can use it.

CSS stands for Cascading Style Sheets: a markup language that is used to determine how web pages look. CSS is combined with HTML (Hyper Text Markup Language), which is the markup language used to define the semantic structure of a website. If this doesn’t make much sense to you, don’t sweat it – it’s more supplementary information than necessary.

CSS is a simple language, once you get your head around it. In terms of being able to alter the appearance and placement of images, you’ll be able to pick up and work with the code I include in this article with relative ease.

Here’s an example of a CSS code snippet pertaining to the appearance of a particular image type in WordPress:

.alignright {
border: 1px solid #c5c5c5;
float: right;
margin: 0 0 10px 10px;
padding: 3px;
}

The .alignright text is a CSS class (identifiable as a class by the period that precedes its name). In this case, .alignright is a class that WordPress assigns to any image which is selected within the WordPress backend to be aligned to the right of the content:

Various declarations (such as border and padding) can be applied to a CSS class, which are ultimately applied to any HTML element that the class in question has been assigned to.

In the example above, any image in WordPress that has been aligned to the right (via the text editor) will have the .alignright class assigned to it, and thus will inherit the styling applied to that class. The image will ‘float’ to the right, have a little margin to stop text from running into it, a gray border around it, and a little padding to separate the border from the image edge.

That’ll all make a lot more sense with a visual representation:

There are plenty more declarations that can be added to a CSS class; we’ll have some fun with them shortly.

How to Add Custom CSS to WordPress

WordPress themes come with their own CSS ‘stylesheets’, which are files filled with CSS markup like in the example above. While there are many ways to add your own custom CSS to your website, editing an existing theme’s CSS stylesheet is not the way to go. Your hard work could be overwritten the next time the theme is updated.

The cleanest and most future-proof method is to create your own simple WordPress “child theme” with its own CSS stylesheet. The CSS stylesheet within your child theme’s directory will override any matching styles within the “parent” theme’s stylesheet.

Creating a child theme may sound like a somewhat daunting exercise, but is easy enough if you’re familiar with FTP. If you want to go down this road, check out the tutorial on the WordPress Codex.

If you’re looking for something more straightforward, I have two plugin suggestions:

The Custom CSS module within Jetpack: Ideal if you already use Jetpack on your site.
Simple Custom CSS: If you don’t already use Jetpack (and have no need for its varied functionality), this is a more lightweight option.

Whichever option you take, adding custom CSS to WordPress will be as simple as editing the custom CSS file that has been generated (by you or one of the plugins).

The WordPress Default CSS Image Classes

With all of that out of the way, let’s get down to the juicy stuff: WordPress’ default image CSS classes.

There are four default classes you can use to change the appearance of images in WordPress:

.aligncenter
.alignleft
.alignright
.alignnone

I’m sure you can figure out what types of images these classes are assigned to.

Every single image that you add to your website via the TinyMCE text editor on the post/page screens will have one of these classes assigned to it, which means that you have the power to style all of these images as you see fit.

To style a particular image type, all you need to do is follow the format you’ve already seen in the example above:

.class-name {
property: value;
property: value;
property: value;
}

Important: When an image has a caption, WordPress assigns one of the above classes to a div that surrounds the image, rather than the image itself. Tackling this particular issue is outside the scope of this post, but is something to bear in mind as you experiment. I recommend that you test your chosen effects with captioned images to see how things look.

With that said, let’s move onto the fun part: styling your images!

Simple Image Styling With WordPress

When it comes to adding simple stylistic effects to your images in WordPress, there are five common CSS properties:

background
border
float
margin
padding

To gain a complete understanding of how these properties affect the appearance of an image (or more accurately, the appearance of the ‘frame’ in which the image is placed), we need to consider the CSS ‘box model’:

Courtesy of W3.org

When it comes to styling images, the image itself is the “content.” That image is then surrounded by padding, borders and margins; all of which you can define. Images can also be ‘floated’, which for the purposes of this tutorial simply means aligned. Your ‘float’ options are left, right and none. (Centering an image is a little more complicated; we’ll get onto that shortly.)

Let’s consider a simple example to demonstrate how these properties can be used. First, here’s an image with the .alignright class assigned to it, without any CSS markup:

Now let’s add some simple CSS markup:

.alignright {
background: gray;
border: 3px solid black;
float: right;
margin: 10px;
padding: 3px;
}

Here’s the end effect:

You can probably decipher what we have done here. The image has now been “floated” (i.e. aligned) to the right, so that the text wraps around it. We added a little bit of padding, which has been given a gray background. We applied a thick black border which appears around the padding. Finally, A 10px margin creates some room between the image and text.

There’s a lot that you can do with the five selectors above alone. If you want to explore them further, here’s a comprehensive resource for each one:

background
border
float
margin
padding

I promised a solution for centering images too. For reasons that are beyond the scope of this tutorial, CSS does not simply allow you to use float: center; (i.e. the value does not exist). Instead, you have to define the image as a block element, apply margin: 0 auto; and define a width for the image. You can read more about this technique here. (I’ll also provide an example of the markup used to create a centered image below.)

More Examples of What You Can Do With Image CSS in WordPress

Now you have a better understanding of the most common CSS properties you can use, here are a few examples to give you some inspiration.

Let’s start with some padding and a gray background to give our images a frame:

.alignleft {
background: #dbdbdb;
float: left;
margin: 0 10px 5px 0;
padding: 5px;
}

That markup results in this:

Let’s explore what’s happened here:

I used an HTML hex color for the background. These color codes give you practically limitless flexibility in picking colors for your website.
Because the image I used is a transparent PNG, the background color has filled up all the available space not used within the image file.
I’ve used four values within the margin property to set different margins for each side of the image.

Let’s try something else. Instead of giving our images a background color, let’s set them in a simple border to delineate them from the content. Here’s the markup:

.alignright {
border: 1px solid #000099;
float: right;
margin: 0 0 10px 10px;
padding: 3px;
}

As you can see, we’ve played around with the margin property values to account for the image alignment, reduced the padding and added a 1px solid border. Here’s the end result:

Finally, let’s created a centered image and give it a thick gray border. Here’s the markup:

.aligncenter {
border: 5px solid #dbdbdb;
display: block;
margin: 0 auto;
width: 300px;
}

And the end result:

As you can see, it is possible to completely change the placement and appearance of an image in WordPress using CSS alone.

In reality we’ve only scratched the surface here; there is much more that you can do. (If you’re interested in discovering more, I’ve supplied some useful resources for further learning below.)

What About Existing Styles?

If you’re using a WordPress theme of any real quality, the developer will have already added styles to each of the default WordPress image classes. At the very least she will have aligned each image class appropriately.

Beyond that, her choices will have been entirely subjective, and you now have the power to override their styling effects. Any CSS markup you enter – either on your child theme’s stylesheet or via a plugin – will take precedence over the theme’s default CSS. You’re in control.

The Sky’s the Limit

In reading this article, I also hope that you are inspired to experiment with your own custom CSS stylings. I didn’t want to delve too deep into more advanced selectors in this tutorial, but there is a lot more you can do with CSS than I’ve covered here.

If you’re keen to explore more advanced effects (such as shadows, rounding and rotation), there are a huge number of free online resources that can teach you more about CSS. My personal recommendations are:

Mozilla Developer Network: Loved amongst the web developer community.
W3 Schools: Hated by many “serious” web developers, but there’s no refuting its depth and breadth of information. Just bear in mind that it may not always be 100% correct and/or up-to-date.
WordPress Codex: Learn more about how WordPress and CSS come together.

If you have any questions, please don’t hesitate to fire away in the comments section below!

Photo Credit: Simon Pow, PicJumbo.