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 ﬁll 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,
, 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.)
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
Let’s explore how we can divide a page into logical sections
Adding a border
An over-the-border test drive
Adding some real style to the elixirs section
The game plan
Working on the elixir width
Adding the basic styles to the elixirs
What we need is a way to select descendants
Changing the color of the elixir headings
Fixing the line height
It’s time to take a little shortcut...
Adding <span>s in three easy steps
The <a> element and its multiple personalities
How can you style elements based on their state?
Putting those pseudo-classes to work
Isn’t it about time we talk about the “cascade”?
Welcome to the “What’s my speciﬁcity game”
Putting it all together