HTML and CSS Reference
In-Depth Information
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.
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 HTML, this is a bunch of
<h2>
,
<h3>
, and
<p>
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.
Joe
Jim:
Well, I see why you get paid the big bucks, Frank. Could we nest the
elixir stuff inside a
<p>
element, or a
<blockquote>
?
Frank:
Well, that would ruin the structure and meaning of the page, an
elixir menu isn't a paragraph or a block quote. Feels like a hack to me…
Frank:
…actually, I don't think we're that far off. I've been reading a
certain
book
on HTML and CSS, and I'm just up to a section on a new element
called
<div>
. I think it might be the tool we need.
Joe:
<div>
—what's that? It sounds like it's for math.
Frank:
That's not far off, because a
<div>
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
<div>
…
