Do you ever have a need to override the way that your theme styles images? Maybe your theme is set to put a border around images in your posts, or float them over to the left, etc., and normally you’re okay with that, but for certain posts/images, you’d like them to be styled differently. Did you know you can change the styling for each image just by putting some simple edits in the HTML code for your post?
To change the style of your images, first insert them as you normally do, and then click on the HTML tab (or in Blogger it says ‘Edit HTML’). Look for the code that calls the image you want to work with- it will start with ‘<img src= ‘. We’re going to insert some “inline” CSS styling into the HTML tag just before the /> that ends the tag for that image.
Example:
Suppose my image tag is <img src=”http://randaclay.com/me.jpg” />. Here’s how that image shows up with no inline styling applied:
Now, let’s suppose I want to add a thick black border around the picture. Right before the /> that ends the tag, I’m going to insert: style=”border: 3px solid #000000″ (you can find the six-digit HTML color codes here; ‘px’ is short for pixels).
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000″ />
Maybe I’d like there to be a space between the border and the actual picture:
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px” />
Now maybe I’d like that white space to actually have a color:
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px; background-color: #66ff99″ />
Now let’s apply some styling so that the image appears on the left of the paragraph and has a good amount of margin between it and the text:
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px; background-color: #33cccc; float: right; margin-left: 20px” />
For this one, I actually needed the paragraph text over here to the left to be after the image tag in the code.
If your theme automatically styles your images with borders and you’d like to remove the border, use style=”border: 0px”