HTML and CSS Reference
In-Depth Information
Lines 12 through 17 identify the general style for all tables on the Web pages. The width
of all tables (with the exception of the navigation bar) will be 65% of the browser window.
You control the width of the navigation bar table separately by naming a class called menu
(remember this can be any arbitrary name). The margin: auto statements horizontally
center the element table with respect to the edges of the window. The values used for
each side are equal because of the auto designator. You also set the table border color to
#545859, with a ridge style and a width of 10 pixels.
On lines 19 through 24, beneath the table element, are three named classes: menu,
menuicon, and menupipe. Those lines are indented so that you can easily see that these
classes are related to the table element. On line 20, the width of the menu class is desig-
nated to be 60% of the browser window, instead of the 65% width of all the other tables.
Line 19 tells the browser to center the navigation image links (Home, Golf, Tennis, and
Dining) within the cells of the table instead of the default setting of left-alignment. See
the differences created by these styles in Figure 4-22.
The menuicon class sets the width of that column to 23%. The menupipe class sets the
column containing the pipe symbol to 1%. You can utilize these classes (menu, menuicon, and
menupipe) with the HTML code that you just typed in the oceanside.html file.
In lines 26 and 27, you identify styles for all table headers (<th>) and rows (<tr>).
You designate a background color of #757775 (which is a dark gray) with text color that is
white. Line 29 creates a table row class named stripe. That will be used to set every other
row to a light gray color to distinguish them from the rows that are default white in color
(Figure 4-22). Line 31 creates a table data cell named bolder that is used in the Dining
Web page as shown in Figure 4-1d on page HTML 155.
External Style Sheet
For the external style
sheet, be sure to use the
CSS validator found at the validation service
image links
centered in cells
th element in external
style sheet (lines 26 and
27) defines background
and text colors
table element in
external style sheet
(lines 12 through 17)
defines width as 65%
of window with auto
(equal) margins on
left and right; border
in color #545859
with 10px width in
ridge style
stripe class used to
color every other row
Figure 4-22
The final section of CSS code, lines 33 and 34, defines the styles to be applied to
table captions. You want all captions to be aligned beneath the table and italicized.
Search WWH ::

Custom Search