Head First HTML with CSS

a new element called div
Jim
432 Chapter 11
This looks tough, guys. There
are a lot of style changes we’ve
got to make, and the elixirs style
doesn’t really match the rest of
the page.
Frank
Joe
Jim: Come on, Frank, you know we can just create a class or two and then
style all the elixir elements separately from the rest of the page.
Frank: That’s true. Maybe this isn’t so bad. I’m sure there is a simple
property to make text align to the center And we know how to handle the
colored text.
Jim: Wait a sec, what about that border around everything?
Frank: Piece of cake. We just learned how to make borders. Remember,
every element can have one.
Joe: Hmm, I don’t think so. If you look at the XHTML, this is a bunch
of , , and elements. If we put separate borders on every
element, they’ll just look like separate boxes.
Frank: You’re right, Joe. What we need is an element to nest all these
other elements inside, so we can put a border on that. Then we’ll have one
border around everything in the elixirs section of the page.
Jim: Well, I see why you get paid the big bucks, Frank. Could we nest the
elixir stuff inside a element, or a ?
Frank: We can’t use because can’t contain other block elements,
and the headings and paragraphs are obviously block elements. I don’t
think we’d want to do that anyway; paragraphs are for text.
Joe: And ’s not right either, because this is an elixir menu,
not a quote.
Frank: Actually, I think we’re on the right track. I’ve been reading a certain
book on HTML & CSS and I’m just up to a section on a new element called
. I think it might be the tool we need.
Joe: – what’s that? It sounds like it’s for math.
Frank: That’s not far off, because a lets you divide your page into
logical sections or groupings.
Jim: Hey, that sounds like exactly what we need!
Frank: Yup. Let me show you guys how to divide a page into logical
sections, and then I’ll show you what I know about ...