Your Electronic Books

If you wanted to style a
specific image to resemble a Polaroid photograph, you could set equal borders on the top,
left, and right, and a larger one on the bottom. In HTML, you would add a class attribute
to the relevant image:
?? alt="Sunset photo" />
In CSS, you would write the following:
.photo {
border-width: 8px 8px 20px;
border-style: solid;
border-color: #ffffff;
}
WORKING WITH IMAGES
137
4
The results of this are shown in the image to the
right. (Obviously, the white border only shows if
you have a contrasting background??”you wouldn??™t
see a white border on a white background!)
Should you want to, you can also reduce the declaration??™s
size by amalgamating the border-style
and border-color definitions:
.photo {
border: solid #ffffff;
border-width : 8px 8px 20px;
}
There are other border-style values that can be used with images, as well. Examples
include dashed and dotted??”see the border-style entry in Appendix D (CSS Reference)
for a full list. However, overdone decoration can distract from the image, so always ensure
that your borders don??™t overpower your imagery.
Using CSS to wrap text around images
You can use the float and margin properties to enable body copy to wrap around an
image. The method is similar to the pull quote example in the previous chapter, so we
won??™t dwell too much on this. Suffice to say that images can be floated left or right, and
margins can be set around edges facing body copy in order to provide some whitespace.


Pages:
198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222