HTML and CSS Reference
In-Depth Information
◗
2.
Return to the
cp_styles.css
file in your text editor. At the bottom of the file, insert
the following style rule to place the
aside
element halfway down the left edge of
the page (see Figure 4-64):
/* Sidebar styles */
aside {
color: rgb(145, 98, 78);
position: absolute;
top: 400px;
left: 10px;
width: 30%;
}
Figure 4-64
Formatting the sidebar listing upcoming events
displays the text in
a light brown font
places the sidebar
400 pixels from the top
of the page and 10 pixels
from the left edge
sets the
sidebar
width to 30%
◗
3.
Save your changes to the file and then reload
cycle.htm
in your Web browser. As
shown in Figure 4-65, the sidebar describing the upcoming rides starts halfway
down the left edge of the page.
Figure 4-65
Sidebar of upcoming events
sidebar
