HTML and CSS Reference
In-Depth Information
Figure 6.9
The lower Web page
uses CSS absolute
positioning
Let's add the CSS to make this page more “stylish” and look like the lower screenshot
in Figure 6.9. Save the file with the name trillium.html. With trillium.html open in a
text editor, modify the code as follows:
1.
This page uses embedded styles. Code opening and closing
<style>
tags in the
header section.
<style type="text/css">
</style
>
2.
Create style rules for the
h1
selector. Configure a background color (
#B0C4DE
),
text color (
#000080
), a 3 pixel solid bottom border in the color
#000080
, and 5
pixels of padding on the bottom and left sides.
h1 { border-bottom: 3px solid #000080;
color: #000080;
background-color: #B0C4DE;
padding: 0 0 5px 5px;
}
Note
: The padding can be set for each side individually using the
padding-top
,
padding-right
,
padding-bottom
, and
padding-left
properties. You can use
shorthand notation to set all four values in one
padding
property. The order of the
numeric values determines which box side is configured (top, right, bottom, left).
3.
Create style rules for a class named
content
. Configure the position to be
absolute, 200 pixels from the left, 75 pixels from the top, a width of 300 pixels,
and Arial or sans serif font typeface.
.content { position: absolute;
left: 200px;
top: 75px;
font-family: Arial,sans-serif;
width: 300px;
}
4.
Assign the paragraph to the
content
class. Add
class="content"
to the open-
ing paragraph tag in the body of the Web page.
Search WWH ::
Custom Search