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