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.
Please use your name when you comment- I would appreciate it. Using just keywords makes your comment seem spammy, and it's liable to get deleted. See my comment policy for more detail. Thanks!
Leave a Reply
April 4, 2008 12:07 pm
CSS can be a headache to learn but it is such a great tool. Thanks for the tips.
April 4, 2008 12:42 pm
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
April 4, 2008 3:09 pm
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.
April 4, 2008 4:50 pm
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.
April 4, 2008 9:02 pm
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!
April 5, 2008 7:01 am
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.
April 5, 2008 8:39 am
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…
April 5, 2008 11:58 am
Good tips! Thanks.
April 6, 2008 9:47 am
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.
April 7, 2008 3:32 am
[...] Latest post: How to style images in your blog posts [...]
April 7, 2008 7:25 pm
Very good post. I love learning new things about how to make my site look better and this rocks!
April 7, 2008 8:27 pm
Thanks for the great post. I was going to use a different method until I found this! Boy, do I love CSS…sometimes.
April 7, 2008 11:55 pm
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.
April 8, 2008 4:17 am
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.
April 8, 2008 4:39 am
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.
April 8, 2008 6:30 am
thanks a lot for this post…i also have a blog and this is a great idea to pimp my blog
April 8, 2008 7:00 am
Thanks for the tips. Sometimes really small and simple things like this can make all the difference
April 8, 2008 10:00 am
I don’t like border…Always im use no border. But very thanks for the tips.
April 8, 2008 11:16 am
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.
April 8, 2008 8:32 pm
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.
April 8, 2008 10:24 pm
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.
April 9, 2008 9:54 am
It’s strange how some small details could change the”face” of a picture instantly. Nice tutorial from you.
April 10, 2008 12:40 pm
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
April 11, 2008 8:43 am
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.
April 13, 2008 5:39 am
that is a really good tip, I will need to remember it for mt newest blog project which I am about to launch.
April 13, 2008 9:52 am
Thanks for this useful information! Some examples are new for me…
April 13, 2008 11:17 pm
Wow, thanks, now I really know what to do. thanks for the recommenadations in details.
April 14, 2008 6:43 am
Thanks for the informative article! The tips are great and helpfull. Go on that way!
April 14, 2008 6:09 pm
Thanks for this useful information! Some examples are new for me
April 16, 2008 6:22 am
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!
April 16, 2008 10:26 am
nice.. thanx
Rani the Brainy | General Fun
April 16, 2008 11:40 am
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?
April 16, 2008 12:43 pm
ah thats tricky Randa…can you do it in CSS too?
April 16, 2008 1:33 pm
Hey great tips. I have been using Adobe photoshop. Do you consider it a good option?
April 16, 2008 3:57 pm
Great post, CSS can be a really big pain sometimes so I prefer doing most of my image modifications from within PS.
April 17, 2008 6:56 am
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!
April 18, 2008 7:39 am
Nice and simple solution, i was looking for something like this.
April 18, 2008 4:01 pm
I love when I see blog posts with CSS tips! I wish more people would start using it instead of tables!!!!
April 20, 2008 8:34 am
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.
April 20, 2008 4:19 pm
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?
April 25, 2008 10:34 am
I read here very often, i like these blog. Very nice articles. Great done. Go on that way.
April 26, 2008 1:19 pm
This is great to change the background color. I just learn something from your blog. You are doing a great job
April 27, 2008 7:54 pm
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.
May 1, 2008 1:50 am
Thank you very much for your valuable tips. I will use these tips to change background colors and add borders to my blog pictures.
May 1, 2008 7:07 am
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
May 2, 2008 4:18 pm
Sweet…thanks a lot. I really want to get into CSS to stylize my blog.
May 5, 2008 1:16 pm
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
May 10, 2008 12:21 pm
Thanks for this very informative post. I’ll apply this the next time I have a picture to upload on my blog.
May 11, 2008 11:42 am
[...] 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 [...]
May 14, 2008 10:58 am
Now that…is awesome! Thanks for the great guide!
May 18, 2008 6:13 pm
@ Design your own tattoo
If finding hex codes is an issue, you can use color names instead, only now you should remember the names (which IMO is easier). Refer to w3school’s color name list. Note only 16 of these colors will validate, the rest will work.
May 21, 2008 3:33 am
Hmm.. But then this is still don’t look so sleek. I’d love some which have glass based frame or shadows. I think shadows are simple enough and adds perspective.
June 16, 2008 8:40 pm
[...] 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 [...]
June 19, 2008 5:57 pm
thank you very much for this! Those darn WYSYWIG editors in Wordpress drive you crazy and limit your abilities. This will help me and my clients in better handling images inside our blog posts.
June 21, 2008 3:10 am
[...] to flow nicely and wrap around the image. Randa Clay has put together a very helpful tutorial on how to style images and how to align them with CSS. Finally, if you’re showcasing series of thumbnails, then set [...]
June 27, 2008 3:50 pm
CMS’ like drupal absolutely depend on CSS to design with, it is the most powerful tool. You can create an absolutely stunning website using CSS alone, and even more stunning after you’ve taken it to a design program like Photoshop.
June 30, 2008 2:48 am
Excellent post Randa, i often don’t illustrate blog posts with images when i want to because i can never get them to sit right with my content. So this has provided a bigger help than you realize, i will now make a point of posting an image or two per post to compliment the content.
Thanks, Tony
July 5, 2008 4:15 pm
Great post. I’ve decided to give up LiveWriter because of the terrible things it did behind the scenes to my Wordpress code - essentially it kept duplicating my photos whenever I’d call up old posts to edit. In some cases I ended up with four and five copies of the exact same jpg file littering my database.
The downside is I had to give up the easy drop shadow and photo borders built into the Windows application. I miss them. I’ve bookmarked this post as a starting point to figure out how to add effects from within the Wordpress html editor.
Thanks much.
August 17, 2008 3:47 pm
Nice imaging styles.Thanks for sharing it, it is really awesome.
__________________
Naruto Ninja
September 7, 2008 6:59 pm
A great step-by-step guide! Pictures really do add interest to blogs and keeping the reader engaged is essential. Thanks for sharing with us.
September 15, 2008 9:10 am
The major problem with most people ( including me ) is that we fear to change anything with our CSS or code fearing a screw up or backlash of some sort.
An article like this can really get me ( and a majority of other people ) motivated and ready to tinker around with Wordpress and real code.
September 22, 2008 3:49 pm
oh very nice and thorough tutorial on styling images and sometimes styling images in wordpress gives you hard nuts to chew happened with me i could’t just aligned my images well the end results were i lost and started working on another theme you know am not good with css =/
September 24, 2008 5:54 pm
Those darn WYSYWIG editors in Wordpress drive you crazy and limit your abilities. thank you very much for all! Thansk a lot
September 24, 2008 5:59 pm
Thanks for the great guide! Thanksss… Thankss.. Thanks.
October 7, 2008 9:52 am
Hi thanks for the great info. I recently set up a blog at my e-commerce store about Dead Sea Cosmetics and Products and I’m terrible with the design process so I found these tips very useful. Thanks