Head First HTML with CSS

a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
We’re setting the border-bottom
as a shortcut.
Let’s take Starbuzz to the next level
Here’s the goal: to turn Starbuzz Coffee into the site on
the right. To do that, we need to move the Bean Machine
sidebar over to the right so we’ve got a nice two-column
page. Well, you’ve done this once already with the lounge,
right? So, based on that, here’s what you need to do:
1
2
3
4
Give the element you’re going to float a unique
name using an id. That’s already done.
Make sure the element’s XHTML is just below
the element you want it to float under; in this
case, the Starbuzz header.
Set a width on the element.
Float the element to the left or the right. It looks
like you want to float it right.
Let’s get started. In a few simple steps, we should have the
Starbuzz CEO sending a few Chai Teas over on the house.
layout and positioning
And for the last two rules in the Starbuzz CSS we use
the a:link and a:visited pseudo-classes to style the links.
Notice that we’re getting a nice dotted
underline effect on the links by using a
dotted bottom border instead of an
underline. This is a great example of using
the border property on an inline element.
We’ve got a nice two-column look
here, with discrete columns.
you are here 503