How to Style an Image with CSS

Use CSS to present your website's images in the best possible way. In this article, you'll learn where to place an image and whether or not to include decorations such as borders.

Difficulty: Moderate

Instructions

Things You'll Need:

• Nothing new is needed for this section

Floating and Centering

1. Insert your image on the page with your usual method. Don't forget to include suitable alt text for the image.

2. To make your text wrap around the image on the right, similar to the way it is in the photo introducing this article, use a CSS rule like this:
   
   img {
   float: left;
   padding-right: 1em;
   }
   
   The float:left rule makes the image move to the left margin. The padding-right rule keeps the text from bumping right up against the right side of the image. If a border was added to this image, padding would come between the image and the border. See Section 2 to work with an image with a border.

3. 
    
   The image floats to the right margin and the text wraps around on the left.

   To make the text wrap on the left, float the image on the right margin. Use a rule like this:
   
   img {
   float: right;
   padding-left: 1em;
   }

4. To center an image you must first make the normally inline image element into a block level element.
   
   img {
   display: block;
   }

5. 
    
   A block level element is centered with margin rules.

   Next, add margins to the left and right of the image to center it. The proper value for the left and right margins to center anything is auto.
   
   img {
   display: block;
   margin-right: auto;
   margin-left: auto;
   }

Borders and Margins

6. 
    
   With a border on all 4 sides of the image, you create a frame.

   Borders can be used to create a drop-shadow effect or the appearance of a frame.
   
   To create a thick, frame-like border using the groove border style, a rule like this can be used:
   
   img {
   float: left;
   border-width: 1em;
   border-style: groove;
   border-color: #000000;
   }
   
   Other border styles are solid, dotted, dashed, double, ridge, inset and outset. Width can be expressed in pixels, ems, or percentages.

7. Borders can be applied selectively to the top, right, bottom and left of the image. You can use this knowledge to create an effect like a drop shadow.

8. 
    
   Borders on only 2 sides look like a drop shadow.

   Using a solid border in 2 shades of gray on just the right and bottom border, you get a drop shadow effect.
   
   img {
   float: left;
   border-right-style: solid;
   border-right-color: #CCCCCC;
   border-bottom-style: solid;
   border-bottom-color: #999999;
   }

9. 
    
   Create a margin around the image to give it some whitespace.

   Margin is outside the border. Adding some margin on the right and bottom of the image will prevent the text from bumping against it.
   
   img {
   float: left;
   border-right-style: solid;
   border-right-width: 8px;
   border-right-color: #CCCCCC;
   border-bottom-style: solid;
   border-bottom-width: 8px;
   border-bottom-color: #999999;
   margin-right: 1em;
   margin-bottom: 1em;
   }

Tips & Warnings

• If you have images in more than one division (div) of a page, use descendant selectors to style them individually. Possible selectors: #content img, #sidebar img, #feature img.

[Veesites]

on 7/6/2008 nelle, Glad I was able to help. If I can explain anything else, feel free to request an article.
Virginia

[nelle2nelle]

on 7/6/2008 Hi Virginia,

Have to send along a note of many thanks... we encounter on BlogHer on occasion, and it was quite fortuitous that I stumbled upon your *solution* to a centring problem on a blog sidebar. After scouring the internet for 3 hours, trying posted advice to no avail, I've landed here (and knew immediately this was going to work ;-) )Inside of 3 minutes had it set correctly based on your advice.

nelle