HTML and CSS Reference
In-Depth Information
EXAMPLE
14.24 (
CONTINUED
)
This is a paragraph.
</p>
</div>
</body>
</html>
EXPLANATION
1
The style sheet starts here with the
<style>
tag.
2
A class called
divStyle
is defined.
3
This style will produce a blue box, 250 pixels wide and 150 pixels high. It will be
positioned at the top, left corner of the window (0,0) because the
top
and
left
properties are undefined.
4
The
div
element will use the style defined by the
divStyle
class.
5
The paragraph element is embedded within the
<div>
tags. The
div
box is like a
mini window. It will placed at the top, left corner of the window, because its po-
sition has not been defined. See Figure 14.27.
Figure 14.27
The
div
block is absolutely positioned in the window.
Relative positioning places the element in a position relative to the element where it is
defined within the document. This type of positioning is used to control the way ele-
ments appear in relation to other elements in the document. In the following example
the
.ParaStyle
class is positioned relative to where it should be placed within its con-
tainer, a
div
block.
