HTML and CSS Reference
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
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.
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> …