Head First HTML with CSS

A close look at the elixirs XHTML
Alice sure has asked for a tall order, hasn’t she? She wants us to take the existing lounge
XHTML and make it look like the handout menu. Hmmm... that looks challenging, but we
do have CSS on our side, so let’s give it a try. But, before we jump right into styling, let’s get
an overview of the existing XHTML. Here’s just the XHTML snippet for the elixir specials;
you’ll find it in “lounge.html” in the “chapter11/lounge” folder:
We have
three
elixirs,
each with
the same
structure.
Weekly Elixir Specials
Lemon Breeze
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
Chai Chiller
Not your traditional chai, this elixir mixes maté
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
Black Brain Brew
Want to boost your memory? Try our Black Brain Brew
elixir, made with black oolong tea and just a touch
of espresso. Your brain will thank you for the boost.
The elixir specials section begins
with an heading.
Join us any evening for these and all our
other wonderful
elixirs.
divs and spans
Each elixir has
an image in a
element.
...a name, in an
heading...
...and a
description,
also in a
paragraph.
And this
structure is
repeated for
each elixir.
And, finally, at the
bottom, there is
another paragraph, with
some text and a link to
the real elixirs page.
you are here 431