89
xx
11
Advanced Web Construction
divs and spans
table of contents
It’s time to get ready for heavy construction.
In this chapter
we’re going to roll out two new XHTML elements, called <div> and <span>. These
are no simple “two by fours;” these are full blown steel beams. With <div> and
<span>, 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. (But, 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
431
Let’s explore how we can divide a page into logical sections
433
Adding a border
440
An over-the-border test drive
440
Adding some real style to the elixirs section
441
The game plan
442
Working on the elixir width
442
Adding the basic styles to the elixirs
447
What we need is a way to select descendants
453
Changing the color of the elixir headings
455
Fixing the line height
456
It’s time to take a little shortcut...
458
Adding <span>s in three easy steps
464
The <a> element and its multiple personalities
468
How can you style elements based on their state?
469
Putting those pseudo-classes to work
471
Isn’t it about time we talk about the “cascade”?
473
The cascade
475
Welcome to the “What’s my specificity game”
476
Putting it all together
477
Exercise Solutions
483
