Why Images Are So Important for Websites<\/h2>\n
What better way to explain how beneficial images are to blogs than by proving it with an image?<\/p>\n Things get even more interesting when you get down to the biology\u00a0of how we process information. Consider for example that\u00a090 percent of information transmitted to the brain is visual, and\u00a040% of people respond better to visual information that plain text\u00a0(source: Zabisco<\/a>).<\/p>\n 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\u00a0of\u00a0text. 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.<\/p>\n Put simply, if you’re not including compelling, relevant imagery within your blog posts, you are nowhere near close to\u00a0making the most of your content. Going the extra mile when it comes to including images in your blog posts and<\/em> presenting them well can make all the difference to\u00a0engagement, traffic and sales.<\/p>\n The WordPress core developers are only too aware of the importance of images for\u00a0websites, which\u00a0is why they afford theme developers (and theme tweakers) a great deal of power and flexibility in determining how images are presented.<\/p>\n 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\u00a0give you an understanding of what CSS is and how you can use it.<\/p>\n CSS stands for Cascading Style Sheets: a markup language\u00a0that is used to determine how web pages look.\u00a0CSS is combined with HTML (Hyper Text Markup Language), which is the\u00a0markup language used to define the semantic structure of a website. If this doesn’t make much sense to you, don’t sweat it \u2013 it’s more supplementary information than necessary.<\/p>\n 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.<\/p>\n Here’s an example of a\u00a0CSS code snippet pertaining to the appearance of\u00a0a particular image type in WordPress:<\/p>\n The Various declarations<\/em> (such as In the example above, any image in WordPress that has been aligned to the right (via the text editor) will have the That’ll all make a lot more sense with a visual representation:<\/p>\n There are plenty more declarations that can be added to a CSS class; we’ll have some fun with them shortly.<\/p>\n 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<\/em> the way to go. Your hard work could be overwritten the next time the theme is updated.<\/p>\n 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.<\/p>\n 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<\/a>.<\/p>\n If you’re looking for something more straightforward, I have two plugin suggestions:<\/p>\n 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).<\/p>\n With all of that out of the way, let’s get down to the juicy stuff: WordPress’ default image CSS classes.<\/p>\n There are four default classes you can use to change the appearance of images in WordPress:<\/p>\n I’m sure you can figure out what types of images these classes are assigned to.<\/p>\n 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.<\/p>\n To style a particular image type, all you need to do is follow the format you’ve already seen in the example above:<\/p>\n Important:<\/strong>\u00a0When an image has a caption, WordPress assigns one of the above default classes to a div<\/em> 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.<\/p>\n With that said, let’s move onto the fun part: styling your images!<\/p>\n When it comes to adding simple stylistic effects to your images in WordPress, there are five common\u00a0CSS properties:<\/p>\n 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’:<\/p>\n 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\u00a0means aligned. Your ‘float’ options are left, right and none. (Centering an image is a little more complicated; we’ll get onto that shortly.)<\/p>\n Let’s consider a simple example to demonstrate how these properties can be used. First, here’s an image with the Now let’s add some simple CSS markup:<\/p>\n Here’s the end effect:<\/p>\n You can probably decipher what we have done here. The image\u00a0has 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.<\/p>\n 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:<\/p>\n 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 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.<\/p>\n Let’s start with\u00a0some padding and a gray background to give our images a frame:<\/p>\n That markup results in this:<\/p>\n Let’s explore what’s happened here:<\/p>\n 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:<\/p>\n As you can see, we’ve played around with the Finally, let’s created a centered image and give it a thick gray border. Here’s the markup:<\/p>\n And the end result:<\/p>\n As you can see, it is possible to completely change the placement and appearance of an image in WordPress using CSS alone.<\/p>\n In reality we’ve only scratched the surface here; there is much<\/em> more that you can do. (If you’re interested in discovering more, I’ve supplied some useful resources for further learning below.)<\/p>\n 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.<\/p>\n 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 \u2013 either on your child theme’s stylesheet or via a plugin \u2013 will take precedence over the theme’s default CSS. You’re in control.<\/p>\n 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<\/em> more you can do with CSS than I’ve covered here.<\/p>\n 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:<\/p>\n If you have any questions, please don’t hesitate to fire away in the comments section below!<\/p>\n![\"Images](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/images-infographic.png\")
A WordPress CSS Crash Course<\/h2>\n
.alignright {\r\n\tborder: 1px solid #c5c5c5;\r\n\tfloat: right;\r\n\tmargin: 0 0 10px 10px;\r\n\tpadding: 3px;\r\n}<\/pre>\n.alignright<\/code> text is a CSS class<\/em> (identifiable as a class by the period that precedes its\u00a0name).\u00a0In this case, .alignright<\/code> 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:<\/p>\n![\"Image](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/image-align-right-700x379.png\")
<\/p>\nborder<\/code> and padding<\/code>) can be applied to a CSS class, which are ultimately applied to any HTML element that the class in question has been assigned to.<\/p>\n.alignright<\/code> 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.<\/p>\n![\"Image](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/image-aligned-right-700x408.png\")
<\/p>\nHow to Add Custom CSS to WordPress<\/h2>\n
\n
The WordPress Default CSS Image Classes<\/h2>\n
\n
.aligncenter<\/code><\/li>\n.alignleft<\/code><\/li>\n.alignright<\/code><\/li>\n.alignnone<\/code><\/li>\n<\/ul>\n.class-name {\r\n\tproperty: value;\r\n\tproperty: value;\r\n\tproperty: value;\r\n}<\/pre>\nSimple Image Styling With WordPress<\/h2>\n
\n
background<\/code><\/li>\nborder<\/code><\/li>\nfloat<\/code><\/li>\nmargin<\/code><\/li>\npadding<\/code><\/li>\n<\/ol>\n![\"Courtesy](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/css-box-model.png\")
.alignright<\/code> class assigned to it, without any CSS markup:<\/p>\n![\"Image](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/image-no-css-700x598.png\")
<\/p>\n.alignright {\r\n\tbackground: gray;\r\n\tborder: 3px solid black;\r\n\tfloat: right;\r\n\tmargin: 10px;\r\n\tpadding: 3px;\r\n}<\/pre>\n![\"Image](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/wordpress-image-with-css-700x551.png\")
<\/p>\n\n
background<\/code><\/a><\/li>\nborder<\/code><\/a><\/li>\nfloat<\/code><\/a><\/li>\nmargin<\/code><\/a><\/li>\npadding<\/code><\/a><\/li>\n<\/ul>\nfloat: center;<\/code>\u00a0(i.e. the value does not exist). Instead, you have to define the image as a block<\/em> element, apply margin: 0 auto;<\/code> and define a width for the image. You can read more about this technique here<\/a>. (I’ll also provide an example of the markup used to create a centered image below.)<\/p>\nMore Examples of What You Can Do With Image CSS in WordPress<\/h2>\n
.alignleft {\r\n\tbackground: #dbdbdb;\r\n\tfloat: left;\r\n\tmargin: 0 10px 5px 0;\r\n\tpadding: 5px;\r\n}<\/pre>\n![\"CSS](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/css-alignleft.png\")
<\/p>\n\n
background<\/code> color has filled up all the available space not used within the image file.<\/li>\nmargin<\/code> property to set different margins for each side of the image.<\/li>\n<\/ul>\n.alignright {\r\n\tborder: 1px solid #000099;\r\n\tfloat: right;\r\n\tmargin: 0 0 10px 10px;\r\n\tpadding: 3px;\r\n}<\/pre>\nmargin<\/code> property values to account for the image alignment, reduced the padding and added a 1px solid border. Here’s the end result:<\/p>\n![\"CSS](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/css-alignright.png\")
<\/p>\n.aligncenter {\r\n\tborder: 5px solid #dbdbdb;\r\n\tdisplay: block;\r\n\tmargin: 0 auto;\r\n\twidth: 300px;\r\n}<\/pre>\n![\"CSS](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/11\/css-aligncenter-700x588.png\")
<\/div>\n<\/div>\nWhat About Existing Styles?<\/h2>\n
The Sky’s the Limit<\/h2>\n
\n