HTML and CSS Reference
In-Depth Information
For
the last two r
ules in the St
arbuzz CSS, w
e use the
a:link
and a:visited
pseudo-classe
s to style the
links.
a:link {
color:
#b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color:
#675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
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:
Give the element you're going to float a unique
name using an
id
. That's already done.
1
Make sure the element's HTML is just below
the element you want it to float under—in this
case, the Starbuzz header.
2
3
Set a width on the element.
Float the element to the left or the right. It looks
like you want to float it right.
4
Let's get started. In a few simple steps, we should have the
Starbuzz CEO sending a few Chai Teas over on the house.
We've got a nice two-
column look
here, with discrete co
lumns.
