HTML and CSS Reference
In-Depth Information
●
Navigation Links.
You could configure a class and apply that class to each anchor tag
in the navigation area of your Web page. However, there is a more elegant method—
use a
descendant selector
—which provides a way to reduce the number of classes
and ids in your coding. In this case we will eliminate the redundant assignment of
each navigation anchor tag to the same class. Using descendant selectors allows you
to select elements that are descendants of (or contained within) another element. The
container specified can be an html selector, a class, or an id. You specify the descen-
dent selector with the following: container element, class or id name, a blank space,
and the descendent element(s). For example, to configure styles for the anchor tags
within the class named
nav
, the descendant selector is coded as
".nav a"
. Configure
this to use 5 pixels padding, a background color of
#e8b9e8
, text color of dark blue
(#000066)
, no underline (
text-decoration: none
), and Verdana, Arial or other
sans-serif font. The CSS follows:
.nav a
{ padding: 5px;
background-color: #e8b9e8;
color: #000066;
text-decoration: none;
font-family: Verdana, Arial, sans-serif;
}
●
Overall Content.
Configure the content class to use Verdana, Arial, or sans-serif
font and have a margin of 10 pixels.
.content
{ font-family: Verdana,Arial,sans-serif;
margin: 10px;
}
●
Page Footer.
Configure a class called footer with
xx-small
font that is centered as
follows:
.footer
{ font-size: xx-small;
text-align: center;
}
Save the wildflower.css file in the wildflowers folder.
Part 3—Test the Content Page
Now that your styles are coded, test the page1.html page again. Your display should be
similar to the screenshot shown in Figure 6.18. If there are differences, verify the
id
and
class
values in your XHTML. Also check the syntax of your CSS. You may find the
W3C CSS validator at
http://jigsaw.w3.org/css-validator
helpful when verifying CSS
syntax. The student files contain a copy of splash.html, page1.html, and wildflower.css
in the Chapter6/wildflowers folder.
A common design for a Web page is a two-column layout with left-column navigation
and right-column logo and content. Figure 6.21 shows a page designed in this format
using CSS.
Search WWH ::
Custom Search