1. Edit the body element—in the HTML page, edit the body start tag, adding the class
value shown. Its significance will be explained later.
<body id="homePage">
value shown. Its significance will be explained later.
<body id="homePage">
2. Edit the body rule. In the CSS document, amend the body rule as shown to add a
light gray background:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #dddddd;
}
3. Style structural divs. Add the following #wrapper rule, which defines a set width for
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.
4. Style the navContainer div. Add the following rule to style the navContainer div.
The font settings define a size and family. Avoid setting a line-height value,
because that makes it much harder to line up the tabs with the borders later. The
padding value applies some padding above the soon-to-be-created tabs, and the
border-bottom value finally surrounds all edges of the content div with a border.
Because the wrapper div has a white background, this currently shows through the
navContainer div, and so a background setting is applied, using the same background
color value as applied to the body element.
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
border-bottom: 1px solid #909090;
background: #dddddd;
}
5. Style the list. Add the following rule to style the list. The bottom padding value
(5px here) adds padding to the bottom of the list, and needs to be equivalent to
the padding value you want to be under the text in each tab.
#navigation ul {
padding: 0 0 5px;
}
Next, style the list items to make them display inline.
#navigation li {
display: inline;
}
6. Add the following rule to style the links. Most of the property values should be
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}
7. Style other link states. Add the following two rules to define the other link states.
The first makes the text slightly lighter when a link has been visited. The second
brings back the default underline on the hover state, along with making the link’s
background slightly lighter.
#navigation a:visited {
color: #222222;
}
#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}
8. Create page-specific overrides. Remember back in step 1, when you defined an id
value for the body element? This can now be used to automate the active tab via
the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.
value for the body element? This can now be used to automate the active tab via
the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.
No comments:
Post a Comment