HTML and CSS Reference
In-Depth Information
bars, content, and a footer. Each of these sections could be placed in its own
div
container
and all of those
divs
enclosed in one main
div
.
(CSS Class Declaration)
.bigblue {
border-style: solid;
border-width:1px;
color: blue;
font-family:arial, times, serif;
font-size:32pt;color: blue;
}
-------------------------------------
(The HTML <div> tags)
<div class="bigblue">
This is the text in a container.
</div>
The
div
container is not only used to change colors, borders, fonts, and so on, but it is
used for absolute or relative positioning of a block of text. For example, it allows you to
create a paragraph style independent of the
<p>
tag. Within the block, the
<span>
tags
can be used to introduce other styles.
In the following example, the
<div>
tag is used to create a block. It is absolutely posi-
tioned in the window at position 0,0, which is the top, left corner. Absolute positioning
allows you to place an element anywhere on the page separate from the rest of the doc-
ument. The top left corner of the document or the elements' parent originate at coordi-
nates 0,0.
EXAMPLE
14.24
<html>
<head><title>Positioning</title>
1
<style>
2
.divStyle {background-color:blue;
3
position: absolute;
width: 250px; height: 150px;
}
p { color: white;
font-size:18pt;
position: absolute;
left:10px; height:5px;
}
</style>
</head>
<body>
4
<div class="divStyle">
5
<p>
