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.
![[Post to Twitter]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-twitter.png){kind=icon}
![[Post to Delicious]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-delicious.png){kind=icon}
![[Post to Digg]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-digg.png){kind=icon}
![[Post to StumbleUpon]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-su.png){kind=icon}
@ 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.
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.
[...] 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 [...]
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.
[...] 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 [...]
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.
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
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.
Nice imaging styles.Thanks for sharing it, it is really awesome.
__________________
Naruto Ninja
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.
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.
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 =/
Those darn WYSYWIG editors in Wordpress drive you crazy and limit your abilities. thank you very much for all! Thansk a lot
Thanks for the great guide! Thanksss… Thankss.. Thanks.
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
I have just started getting into blogging, and this is exactly what I have been looking for. Thanks !
“Прямо даже не верится”
тема реально старая
Забавно )
“отличный блог! отличные посты”
очень красиво, вот бы у нас так сделали
здорово)
“прочитала с удовольствием”
I really do believe pictures play an important part in keeping the reader’s interest. Thanks a lot for the useful tips.
Wow. I really need to learn how to do this stuff because it seems simple.