HTML and CSS Reference
In-Depth Information
Notice that all three navigation bar options (Water Expeditions, Exotic Destinations,
Cycling Tours) are placed within a division (section) of the Web page, as shown by the
<div> and </div> tags. This division is given the id name menubar. You will insert
the embedded CSS code shown below within the <style> </style> container to define
the menubar id and menu class.
16 #menubar {background-color: #303032; color: white; height:
40px;}
17
18 .menu {float: left; padding: 0.6em 3em 0.1em 0.5em;
cursor: default;}
Note that lines 16 and 18 define the styles that are to be used for id="menubar" and
class="menu" in the CSS code. There are also three unordered lists within this same
division (for Water Expeditions, Exotic Destinations, and Cycling Tours), each containing
two list items. Those unordered lists each use the class="menu" (see lines 21, 28, and 35).
Therefore, the styles defined in the CSS code lines 16 and 18 are reflected in the submenu
list items from the three unordered lists.
Lines 16 through 18 set the styles for the drop-down menu that will display at the
top of the Web page, as shown in Figure 7-6a on page HTML 337. In line 16, you set the
background color, text color, and height, of an element named menubar that will be used
in a <div> tag. The background color is set to #303032, while the text color is set to white.
Line 16 also sets the height of the area to 40 pixels. The height is something that you can
adjust as you develop the Web page. You need to determine how much space you want
relative to the default font size.
Line 18 sets the styles for a class named menu. The first style statement floats the
text to the left. The padding property uses the “shorthand property” code. The shorthand
property allows a Web developer to shorten the code. Instead of using padding-top,
padding-bottom, padding-right, and padding-left, you can specify all the padding values
in one property. The padding property can have from one to four values. Table 7-3 shows
the shorthand statement together with the resulting values.
Line Height
The CSS line-height
property gives you the
ability to control line
height. With this property,
you can control the
vertical spacing between
lines of text. There are
three different ways to
add the line-height value:
by number, by length,
and by percentage. If you
specify by number, the
browser uses the font-size
property to determine the
space. You can use em and
pt with the length value
to set a fixed line height.
Finally, you can determine
the line spacing using
a percentage.
Table 7-3 Shorthand Properties
Padding Property Statement
Resulting Values
Shorthand Properties
Shorthand properties
are great to use and
make your CSS code very
efficient. You can use
shorthand properties
with many different
elements, including
padding, borders,
margins, and fonts. See
the w3.org Web site for
helpful information about
shorthand properties.
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
padding: 25px;
all four paddings are 25px
 
Search WWH ::




Custom Search