HTML and CSS Reference
In-Depth Information
h1 { background-color: #eeeeee;
padding: 5px;
color: #666633;
position: absolute;
left: 200px;
top: 20px;
p { font-family: Arial,sans-serif;
left: 100px;
top: 100px;
#yls { float:right;
margin: 0 0 5px 5px;
border: solid;
<img id="yls" src="yls.jpg" alt="Yellow Lady Slipper" height="100"
width="100" />
<h1>Floating an Image</h1>
<p> The Yellow Lady Slipper pictured on the right is a wildflower.
It grows in wooded areas and blooms in June each year. The Yellow
Lady Slipper is a member of the orchid family.</p>
Hands-On Exercises
1. Write the CSS for a class with the following attributes: a light blue background
color, Arial or sans-serif font, dark blue text color, 10 pixels of padding, and a nar-
row dashed border in a dark blue color.
2. Write the CSS for an id with the following attributes: float to the left of the page,
light beige background, Verdana or sans-serif large font, and 20 pixels of padding.
3. Write the CSS to configure a class that will produce a headline with a dotted line
underneath it. Choose a color that you like for the text and dotted line.
4. Write the CSS for an id that will be absolutely positioned on a page 20 pixels from
the top and 40 pixels from the right. This area should have a light gray background
and a solid border.
5. Write the CSS for a class that is relatively positioned. This class should appear 15
pixels in from the left. Configure the class to have a light green background.
6. Extending Hands-On Practice 6.6. Design a two-column page layout with the naviga-
tion on the right side. Use the twocolumn.html file from Hands-On Practice 6.6 as
a starting point. This file is in the Chapter6/wildflowers2folder in the student files.
Search WWH ::

Custom Search