HTML and CSS Reference
In-Depth Information
Table 3-9 CSS Code to Insert Class Definitions in Embedded Style Sheets
Line
CSS Selectors and Declarations
img.align-left
{float: left;
21
margin-left: 5px;
22
margin-right: 5px;}
23
24
25
img.align-right {float: right;
margin-left: 5px;
26
margin-right: 5px;}
27
3
•
in Table 3-9 but do
not press the
e n t e r
key at the end of
line 27. This HTML
code inserts the
embedded style
sheets that will be
used by the align-
left and align-right
class names inserted
in the previous step.
This will align the
images left or right
on the Web page,
with text wrapped
to the right or left
and with five pixels
of horizontal space
around the image
(Figure 3-37).
Type the HTML code
insert image style with class
name align-left that floats image
to the left and adds 5px of space
in left and right margins
insert image style with class
name align-right that floats
image to the right and adds 5px
of space in left and right margins
What does the float
property do?
The float property
allows you to position
elements (in this case photographs) on the Web page.
Figure 3-37
Why do we need margin-left and margin-right properties?
These properties add five pixels (in this case) of space around the left and right sides of
the image that is being inserted. If those are not entered, then the text aligns itself right
next to the image. Allowing a bit of space between these two elements makes the image
and text neater.
