HTML and CSS Reference
In-Depth Information
Optional Attributes
width
: the width of the canvas in pixels.
height
: the height of the canvas in pixels.
Images with Style, Styling with Images
Simply injecting an image into a web page rarely makes for the best visual experience unless you add a bit
more panache. With CSS, you can move and manipulate that image, incorporating it into the layout of your
content on the screen. You can also use images in CSS itself, filling HTML elements with background
patterns, or adding purely decorative images that won't interfere with the structure of your content.
Wrapping Text Around an Image
You've no doubt seen it in hundreds of books, magazines, and newspapers: an image placed in a column
of text where the text wraps around the image and continues on its way, like a stream flowing around a
boulder. In early versions of HTML, this was accomplished with the now-obsolete
align
attribute, but the
modern way to achieve the same effect is with the
float
property in CSS.
The
float
property accepts one of three values:
left
,
right
, or
none
. When an element is “floated,” it
will be shifted as far to one side (left or right) as possible until its edge comes up against the edge of its
containing block (or until it collides with another floating element). Any text or elements that come
afterward will then flow upward around the floated element. The default
none
value is most useful for
overriding any float properties that were granted to an element by another rule in your style sheet.
In Listing 5-11, you see the markup for an image followed by a block of text (both are contained in a single
paragraph). The
img
element features a
class
attribute that will make it easy to apply CSS.
Listing 5-11.
An image in a paragraph of text
<p><img src="images/avatar.jpg" alt="" class="avatar">
Having foiled a jewelry store heist on my way to receive a
medal from the President, imagine my embarrassment to notice
a nasty laser burn on my cape. There was no time to fly back to
base and change into my spare costume, even at my speed. Thank
goodness for Power Outfitters! They had my size and style in stock,
in just the right shade of red, and at a great price, too. I went
back after the ceremony and bought five more capes, plus matching
gauntlets!</p>
The image belongs to the “avatar” class, and Listing 5-12 shows a CSS rule for that class, declaring that
the element should float to the left.
Listing 5-12.
The CSS rule for the “avatar” class
.avatar {
float: left;
}
