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”
For a complete reference of CSS styles available to you, see the W3School CSS reference. I hope you find this to be helpful. If you get stuck while trying this out, let me know in the comments below.
CSS can be a headache to learn but it is such a great tool. Thanks for the tips.
Awesome. This is a great post. I just wrote an article on a similar thing, but I like to use photoshop to just make it match myself. I never really considered the possibility of throwing in some CSS borders to make it work better. Very informative
Good tips.. I don’t really know if I would go with inline CSS styling though on my website… looks kinda sloppy in the source code.
Thanks for the great tips. Yes, making a jump away from tables to pure CSS based layouts is often intimidating and uncomfortable, but a knowledge of CSS styling is a definite plus.
Hey thanks for the great info. Will certainly put the info to good use. The source code may look sloppy but that is not visible so who cares!
James – a little inline styling in individual blog posts isn’t that big of a deal. If you used inline styling for everything on a page, sure, that would be sloppy.
CSS should have variables. I hate digging into the code to find the hex code of a color used somehwere in the site to use it elsewhere so the two parts of the site match. Thats seriously frustrating…
Anyway thanks for the info. Its bad that there are so less places out there that teach you elementary stuff. Everyone makes things as complicated as possible ending up confusing the noob…
Good tips! Thanks.
Thank you so much for the great tips. I have started my new blog today and I will use these tips to edit images in my blog.
[...] Latest post: How to style images in your blog posts [...]
Very good post. I love learning new things about how to make my site look better and this rocks!
Thanks for the great post. I was going to use a different method until I found this! Boy, do I love CSS…sometimes.
I’m not really good with CSS, but this is really simple and the images get really cool. I’m gonna let you know how it works for me.
I like to use a class that will automatically put a thin border around my image with padding and float it to the left. A picture floated to the left usually looks best when there is plenty of text to surround the picture. The picture is often used as decoration for a narrative that is too long to read without a pictorial break.
For everybody, the CSS looks like this.
.thinborderfloat {
float:left;
border:solid 1px silver;
padding:5px;
margin-right:10px;
}
You can put the CSS in your external style sheet or add it to the HEAD section of your page.
In CSS everything is a box. You don’t have to define a margin, a border, or padding but it is always there waiting to be defined if you want to be able to see it.
thanks a lot for this post…i also have a blog and this is a great idea to pimp my blog
Thanks for the tips. Sometimes really small and simple things like this can make all the difference
I don’t like border…Always im use no border. But very thanks for the tips.
Thanks for the useful post! I use border but of a different sort. With padding and margins at 3px and border at 1px solid #ccc.
Thanks for the article, I’ve been looking for something like this. Does anyone know about resizing images on the fly? Everytime I try to resize and stylize an image i lose tons of quality.
This is a great tip for people to customize the images in their blog to give it more personality… fitting the look& feel of the blog with images will now be easier for some .. great tutorial/article.
It’s strange how some small details could change the”face” of a picture instantly. Nice tutorial from you.
I thought I knew quite a bit but I didn’t even know you could put a border around images like that.
Such a small change makes a big difference
This is a good tip for those new to CSS. One thing I would add to make this a little quicker, is to include the code in an external CSS file. Perhaps a left float and a right float class that I can then call for each image I add to the page. It’d just save some time if you have multiple images on a single post/page.
that is a really good tip, I will need to remember it for mt newest blog project which I am about to launch.
Thanks for this useful information! Some examples are new for me…
Wow, thanks, now I really know what to do. thanks for the recommenadations in details.
Thanks for the informative article! The tips are great and helpfull. Go on that way!
Thanks for this useful information! Some examples are new for me
Thanks for the quick tutorial. I have gotten used to to working CSS although I have no coding background. It is a hassle at first, but once you get into the hang of things, it’s a breeze. And I do agree with the commenter near the top of this list that said variables are necessary…I am a firm believer in that!
nice.. thanx
Rani the Brainy | General Fun
Thanks for the tips – I’ve always wondered if there’s more that can be done with our blog images. We always just upload them and move them around or resize them with the cursor. I appreciate you writing the codes out – copy and paste
Rob mentioned something about an CSS file, is that hard to do?
ah thats tricky Randa…can you do it in CSS too?
Hey great tips. I have been using Adobe photoshop. Do you consider it a good option?
Great post, CSS can be a really big pain sometimes so I prefer doing most of my image modifications from within PS.
Great article! Would you mind if I had you post it on my wesbite? I would love my readers on my site to read it as well. I am so glad I found your blog however and will be visiting it more often!
Nice and simple solution, i was looking for something like this.
I love when I see blog posts with CSS tips! I wish more people would start using it instead of tables!!!!
I never would have guessed that so many variations are possible, simply by using border, padding and background-color. I regularly float images, but actually almost never use the border property, especially not in these combinations. Still the visual effects above are quite appealing, so I might reconsider.
Well at least I tried it. My html code didn’t look exactly like that so I didn’t know how to change it on an image. Back to my HTML for Dummies book.
Thanks anyway.
Does anyone know of some really, really dumbed down blog tip sites?
I read here very often, i like these blog. Very nice articles. Great done. Go on that way.
This is great to change the background color. I just learn something from your blog. You are doing a great job
Thank you! I have always wanted to add borders but never looked up how. Seriously, thank you. You will see borders on all of my photos from now on.
Thank you very much for your valuable tips. I will use these tips to change background colors and add borders to my blog pictures.
Great post Randa!
I see so few posts helping blog owners to manage their pages with css etc.
A big challenge is to add a drop down menu to a blog. Is this easy to do?
-Riggie
Sweet…thanks a lot. I really want to get into CSS to stylize my blog.
Very good tips, thanks! I just started a Drupal blog, and I’m trying to figure things out. I love how you have your blog set up. Do you use Drupal? I can’t figure out how to change the layout – I’m a web designer full time, but this whole blogging thing is 100% new to me. I’ll figure it out though, just need to do some research. Thanks for the great blog!
-Jeff
Thanks for this very informative post. I’ll apply this the next time I have a picture to upload on my blog.
[...] for The Blog Herald, and whose tutorials are tops for the untutored – I’ve referred back to “How to Style Images In Your Blog Posts” more than once – which tells you how good a teacher she is – and possibly something about my slow [...]
Now that…is awesome! Thanks for the great guide!