3 Ways To Style Specific Images in WordPress

Sometimes you don’t need to add any CSS code to your child theme in order to style a specific HTML element like an image in a post.

No need to dig into your source code or themes style.css file to find the class or image i.d in order to add styling to an image.

1. Advanced Image Settings – Styles

Simply use the Advanced Image Properties you’ve probably seen hundreds of times already when adding images in WordPress.

You’ll still need to create the CSS code but that’s a walk in the park when using a CSS3 generator.

Drum Roll!

This image actually uses the code below in the Styles field to create the shadow effect.

So that’s the first way.

Simply add some generated CSS code to the Styles field using your Advanced Image Settings.

This method uses CSS code to style the image using the wp-image tag inline.

2. Advanced Image Settings – CSS Class

The second way to target a specific image with CSS is to use the unique CSS Class for your specific image.

Again, you’ll find the CSS Class in the Advanced Image Settings.

aligncenter size-medium wp-image-65

We only need the class (wp-image) with the image i.d which in this case is wp-image-65

Add the same CSS code we generated using the online CSS Tool, and the code looks like this:

.wp-image-65 {
box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
-moz-box-shadow: 0px 0px 20px #000000;
}

Paste this code into your child themes style.css file.

3. Use a Tool Like Snagit

Using a tool like Snagit, you can add effects to your images and screenshots before you insert them into posts and pages.

Can you tell the difference?

Image properties

You can style the image properties for your images border using CSS code or the Image Properties field in the Advanced Image Settings.

Learn how to Remove Add & Change Image Border Properties in WordPress.