Head First html and css

table
 
of
 
contents

---

xix
10
Advanced Web Construction
divs and spans
It’s time to get ready for heavy construction. 
In this chapter 
we’re going to roll out two new HTML elements:

and . These are no 
simple “two by fours”; these are full-blown steel beams. With

and , 
you’re going to build some serious supporting structures, and once you’ve got those 
structures in place, you’re going to be able to style them all in new and powerful 
ways. Now, we couldn’t help but notice that your CSS toolbelt is really starting to 
fill up, so it’s time to show you a few shortcuts that will make specifying all these 
properties a lot easier. And we’ve also got some special guests in this chapter, 
the 
pseudo-classes
, which are going to allow you to create some very interesting 
selectors. (If you’re thinking that “pseudo-classes” would make a great name for your 
next band, too late; we beat you to it.)
Weekly Elixir 
Specials
Lemon Breeze
Chai Chiller
Black Brain Brew
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.
Not your traditional chai, 
this elixir mixes mat
é with 
chai spices and adds
an extra chocolate kick 
for a caffeinated taste 
sensation on ice.
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.
Join us any evening for these and all 
our wonderful elixirs.
A close look at the elixirs HTML 
 
 
 
415
Let’s explore how we can divide a page into logical sections
417
Adding 
a 
border 
 
424
Adding some real style to the elixirs section 
 
 
425
Working on the elixir width
 
 
 
426
Adding the basic styles to the elixirs 
 
 
 
431
What we need is a way to select descendants 
 
 
437
Changing the color of the elixir headings 
 
 
439
Fixing 
the 
line 
height 440
It’s time to take a little shortcut 
 
 
 
442
Adding 

s in three easy steps 
 
 
 
448
The 

 element and its multiple personalities
 
452
How can you style elements based on their state?
 
453
Putting those pseudo-classes to work 
 
 
 
455
Isn’t it about time we talk about the “cascade”?
 
457
The 
cascade 
459
Welcome to the “What’s my specificity?” game
 
460
Putting 
it 
all 
together 461
Exercise 
Solutions 
467