Styling Images

CSS can affect relative minor aspects of an image's display, but that doesn't mean it can't control anything interesting. We can affect its display dimensions, the border around an image, as well as its alignment, and whether text will wrap around it.

Image Dimensions

As you have previously learned, it is always a good idea to size your images to the size you need for your web pages. However, occasionally you find you need to reduce the change the size of an image only slightly. In this case, you can use CSS properties to designate a size.

As in setting the size of cells and tables, you use the width and height properties to specify the display dimensions of an image. You should still always adjust image dimensions proportionally, changing both the height and width by the same percentage of the original size. Values for height and width of images are expressed either in absolute units (px, in) or relative units (usually % of the original image size).

Image Borders

Images do not by default have border around them. If you would like a picture to have a border to frame it, you use the border property to designate the size, style and/or color you want. You can also use the individual properties to specify different borders for different sides of the image, but is not usually done. The values for the style, width and color of borders on an image are the same as are used for boxes.

When an image is used as a link, a default border is automatically applied, as underlining is applied by default to text links. If you want to remove this border on image links, use the declaration:   border: 0; or border: none;

Horizontal image alignments and text wrapping

float Property

This property caused the element, in this case and image, to float against the right or left margin of its parent element. The content of parent element automatically wraps around the image. The float property can also be used with other elements, as will be discussed in the next lesson. The two values for the float property are left and right.

clear Property

If you do not want other content to wrap around and image or any floated object, you use the clear property. Applying the clear property to the element that you do not want to wrap will make the content appear below the object that needs to remain clear. Possible values are left, right and both.

Vertical Image Alignment

Sometimes you have a small text element that you want to place beside an image, perhaps as a description or link text. When you want to control the placement of this small text element in respect to the image, the float property will not do. In this case you use the vertical-align property. The values possible are applied as described below:

• top - aligns baseline of the text with the top of the image
• text-top - aligns the top of the text with the top of the image
• middle - aligns the text halfway down the image - at its middle point
• bottom - aligns the text at the bottom of the image
• text-bottom - aligns the bottom of the text with the bottom of the image
• baseline - aligns the baseline of the text with the bottom of the image
• percentage - begins the text a specified percentage of the way down the image

Image Spacing

When an image has text content wrapped around it, the text is places hard against the edge of the image. This usually results in a crowded feel on the page. To add some negative space between an image wrapped content, you can use either the padding properties or the margin properties. In some browsers padding and spacing work differently when used with pictures, or padding may not work at all. Because of this, it may be safest to just use the margin properties for spacing around imges. Space may be added around the entire image, or only on the side(s) where it is needed.

An image functions automatically as a box object, so any of the box properties may be applied to an image. You could add padding, border and margin, or any combination of these to create the effect you want. Padding may not appear between the image and the border, however, depending on the browser you are using.

Below is a reference for all image properties, showing the possible values.