Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

Images need not just sit on your web page exactly where you stick them. Instead, use CSS with your images to position them relative to other content, and add padding and border attributes to one or more sides.

To style an image, you have three options:

  • Create a tag redefine style for the

    tag to create a style that applies to all images on your page(s).

    img { border: 2px dotted #069; }
  • Create a custom class style that can be selectively applied to individual images as needed.

    .myimg { border: 2px dotted #069; }
    My Graphic
  • Create an ID style that automatically styles the image with a matching id attribute.

#mystyle { padding: 5px; border: 5px dashed #F90; }
My Graphic
id="mystyle" name="mystyle">

In addition to these general image-formatting options, you may also add CSS style rules to your images that control how other objects sit on the page relative to the styled image. Using the float and clear style attributes, you can control whether other objects will float to the left or right of the styled object.

In addition, you can use these attributes to force other elements to move into the area below the styled object. For example, to make a series of images float and clear to the right of a block of text create a custom style with the float and clear attributes:

.imgfloatright {
 margin: 0 0 10px 10px;
 float: right;
 clear: right;

Then apply that style selectively to each image within the text block. The images should sit at the top of the block of text, as shown here:

<img loading=
layers with CSS is a complex affair because you can pretty much control everything related to the style and positioning of a layer. In most instances, designers begin by giving each of their layers a unique ID, such as id=”sidebar”.

After the layer has been named in the HTML, an ID style can be created to control the positioning, width, height, z-index, font family, font size, font color, background color, padding, and border of the layer.

The following declaration shows example CSS for an ID style:

#sidebar {
 position: relative;
 width: 350px;
 height: 200px;
 z-index: 1;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 background-color: #F5F5F5;
 color: #666;
 border: 5px double #999;
 padding: 20px;

Beyond that, the layer contents can be further styled with any combination of tag redefines, ID styles, custom class styles, and advanced combinators.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: