How to Style an Image with CSS

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.

...
Learn how to make text wrap around a floated image with CSS.

Floating and Centering

Step

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

Step

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:

Step

img { float: left; padding-right: 1em; }

Step

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.

Step

To make the text wrap on the left, float the image on the right margin. Use a rule like this:

Step

img { float: right; padding-left: 1em; }

Step

To center an image you must first make the normally inline image element into a block level element.

Step

img { display: block; }

Step

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.

Step

img { display: block; margin-right: auto; margin-left: auto; }

...
The image floats to the right margin and the text wraps around on the left.
...
A block level element is centered with margin rules.

Borders and Margins

Step

Borders can be used to create a drop-shadow effect or the appearance of a frame.

Step

To create a thick, frame-like border using the groove border style, a rule like this can be used:

Step

img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }

Step

Other border styles are solid, dotted, dashed, double, ridge, inset and outset. Width can be expressed in pixels, ems, or percentages.

Step

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.

Step

Using a solid border in 2 shades of gray on just the right and bottom border, you get a drop shadow effect.

Step

img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }

Step

Margin is outside the border. Adding some margin on the right and bottom of the image will prevent the text from bumping against it.

Step

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; }

...
With a border on all 4 sides of the image, you create a frame.
...
Borders on only 2 sides look like a drop shadow.
...
Create a margin around the image to give it some whitespace.