How to use custom CSS to style images in WordPress

When building your next WordPress website, you may desire more nuanced control than you can get from any of the WordPress themes on the market To get the most out of a theme, you might wish to add custom Cascading Style Sheets (CSS) to truly personalize the look and feel of your site.

The following guide will show you how to use CSS to style your images for your WordPress site. 

Adding custom CSS to WordPress

CSS was first introduced in 1996. Before this, web pages and websites were little more than static content delivery networks written in pure HTML. They weren’t very visually appealing, especially by today’s standards. But CSS can help deliver awe-inspiring web aesthetics, as evidenced by some of the best-designed websites today.

For instance, LingApp’s website maintains a steady balance between aesthetics and pragmatism by ensuring page elements (such as images) match the theme of the website and app. They’ve also avoided cluttered web pages by carefully padding and spacing images from other components. Many (if not all) of these facets are controlled by CSS.  

If you’re new to web design but want to add high-level UI customization to your website, adding CSS may be the easiest way. There are plenty of websites and forums offering free advice regarding how to use CSS. However, many of them may not show you how to add CSS to your website — at least not properly. 

The first thing you must do when you encounter pre-written CSS code determines what it’s used for.

Types of CSS for WordPress sites

The first thing you must do is ascertain what the CSS code is designed to do. There are two categories of CSS code for WordPress. They include:

• Site Design. Is the CSS designed to alter the layout, colors, and look and feel of the website? The CSS code is then tied to your theme, and you can use WordPress’s Customizer or directly edit the Theme Style.css file to change your site’s appearance. Neither of these options is particularly difficult; however, the Customizer is by far the easiest method. 
• Content Design. Is the CSS designed to alter the content? For instance, can the code affect how the font is displayed or video and image placement? WordPress allows out-of-the-box editing of the theme but not the content. Since the content is not directly tied to the theme, the easiest way to edit CSS related to content is with a CSS Plugin. 

Best Custom CSS plugins

There are quite a few custom CSS plugins you can use to style your images (and other) content in WordPress. This section of the guide will list five plugins and show you how to use each to style your images.

1. Jetpack’s custom CSS Editor

Jetpack is a popular WordPress plugin that comes replete with a host of different features, chiefly designed to enhance the speed and operability of your WordPress website. One of these features is the Custom CSS Editor, which you can have via the ‘Complete’ bundle that they offer. 

Before using the plugin, you must enable it using Jetpacks settings in your dashboard (Jetpack –> Settings -> Writing). This will then add an option labeled ‘Additional CSS to the Customize option under the Appearance menu item on the Dashboard side panel.

When you first open the CSS editor, it will display a placeholder message in the edit window. Jetpack recommends that you peruse the message, as it will make it easier to get started. Once you’re ready, you can start adding your custom CSS code.

Jetpack allows you to style three facets of your website’s appearance:

• Pre-processor
• Add-on (Additions to your theme)
• Media width

The third option is what you should be interested in most as it allows you to make changes to the size (mainly width) of your images. You may be required to re-insert your (pre-existing) images before all your changes can take effect. You can learn about the plugin’s capabilities and limitations by visiting Jetpack’s official Custom CSS Editor support page.

2. CSS Hero

Jetpack’s Custom CSS Editor is great for simple elemental customizations, and experienced coders can get the most out of it. However, novices would be better served using a dedicated CSS customization tool like CSS Hero. The best thing about CSS Hero is that it is a no-code solution, so you don’t need any coding experience to use it.

CSS Hero allows you to modify the visual elements of your website’s existing content. For example, you can edit the border-radius, background, padding, margin, etc. While CSS Hero is a no-code solution, you can view and edit its generated CSS using the Code Inspector.

3. Post/Page Specific Custom CSS

As the name suggests, Post/Page Specific Custom CSS allows you to edit specific posts or page elements without affecting the overall theme of your WordPress website. It adds an option in your dashboard that allows you to attach custom CSS code when adding a new post/page or editing one. 

It also adds a meta box that allows you to see the CSS over an area you hover while creating your post and features autocomplete to help you build your CSS faster. Post/Page Specific Custom CSS is completely free. It’s created and maintained by a single developer (Łukasz Nowicki). 

4. Simple Custom CSS and JS

Simple Custom CSS and JS is another excellent free option. It allows you to make site-wide or content-specific changes – both to front-facing or admin side sheets. Of course, as the name implies, CSS is not the only aspect it allows you to change; you can also edit and add JavaScript and HTML.

You can add stylesheets and scripts as either external files or embed them as inline code. The text/code editor features syntax highlighting to make debugging or finding errors in your code easier. The dashboard is arguably the best part of Custom CSS and JS. It lets you see your custom code from a unified view, detailing who authored it and when. Your custom code is organized similarly to how your posts are. 

5. WP Add Custom CSS

WP Add Custom CSS is another free WP plugin developed by a single developer (Daniele De Santis). It allows you to add site-wide or post-specific CSS. After you install the plugin, it will add a shortcut to the dashboard (Add Custom CSS). The plugin will also add a section to posts and pages where you can add custom CSS. 

You will then be able to add site-wide or post/page-specific CSS. The changes you make within WP Add Custom CSS will override all other CSS. 

Custom CSS doesn’t have to be difficult

So how do you use custom CSS to style your images in WordPress? The answer depends on which CSS plugin you decide to use. You can use a low-code solution to point-and-click or drag-and-drop your customization or simply copy and paste your code into a CSS editor. Each plugin offers different levels of difficulty. However, none of them are as difficult as writing your website from scratch or directly editing WordPress’s style sheets yourself.