HTML and CSS Reference
In-Depth Information
Next, you'll defi ne some default styles for all of your page body elements. Your initial
style rule will be as follows:
body * {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
font-weight: inherit;
line-height: 1.2em;
list-style: none;
vertical-align: baseline;
}
Note that this style rule uses an asterisk selector ( * ) to apply the styles to every ele-
ment nested within the
body
element. Thus, the text of every element will be displayed
by default in a Verdana, Geneva, or sans-serif font at the default font size of 100%. The
weight of each element will be inherited from its parent. Finally, the default line height
will be set to 1.2 em units, there will be no bullet markers, and each element's text will
be vertically aligned with the baseline. When you start formatting individual elements,
you will override some of these default styles; but for now they'll establish a foundation
for your future work.
To set the default styles for the Web site:
◗
1.
Below the style rule you just created in the
cp_reset.css
file, enter the
following rule:
/* Set the default page element styles */
body * {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
font-weight: inherit;
line-height: 1.2em;
list-style: none;
vertical-align: baseline;
}
◗
2.
Save your changes to the file.
Finally, as you lay out the Cycle Pathology home page, you'll format the main sections
of the page one at a time. Rather than the page being cluttered with those sections that
you haven't formatted yet, you'll temporarily hide each section. You'll do this by setting
the initial
display
property for each section to
none
, and then re-displaying only the
sections that you're ready to work on. Recall that the sections in the Cycle Pathology
home page are the navigation lists (with class names of
horizontalNAV
and
verticalNAV
),
the president's message (with an id value of
president
), another section containing an
article and a fi gure about cycling on Rim Rock Drive (with the id value of
story
), a page
header, a sidebar note about upcoming events, and fi nally the page footer. You'll add a
style rule to the reset style sheet to initially hide all of these sections.
