A Smarter Way To Learn HTML & CSS(2015)
60
Layout: nested boxes
The first thing to know about HTML page layout is that it’s always a collection of invisible nested boxes. Everything, from the header to the shortest paragraph or tiniest icon, is inside something else.
In an earlier chapter you learned that all of the content of a webpage is enclosed by an opening <body> tag and closing </body> tag. This means that the body is the biggest box, the box that contains everything else. (Well, it’s the biggest box your CSS code can affect. The body is actually inside the box created by the opening <html> and closing </html> tags.) Think of the body as the brown box with the Amazon logo on it that the postal carrier delivers. All the other boxes are inside it. To take the metaphor even further, the outermost box, defined by the opening and closing <html> tags, which you never deal with except to write the tags, is the mail truck.
How many boxes are contained inside the big outer box (the body), and how many levels of nesting wind up inside it, are decisions you make, depending on what you want your page to look like. At a minimum, most professional websites include a collection of boxes that looks something like this.
Of the boxes shown in the diagram, the only big box that you absolutely must have in your code is the outer box created by the required opening <body> and closing </body> tags. You can, if you choose, put all of your headings, paragraphs, images, and links inside that one big, undifferentiated box, and some people do. You’ve seen such pages. The text stretches all the way across the browser window. There’s no layout, really. You exit the site as fast as you can.
The diagram above shows the boxes that represent major sections of the page. If I had wanted to show all the smaller boxes that are contained within those boxes, I would have included the boxes containing text. These boxes are created by opening <p> and closing </p> tags, opening and closing heading tags, opening <ul> and closing </ul> tags, and opening <li> and closing </li> tags. On an HTML page, everything is inside something else. Whenever you write an HTML tag, you create a box. The opening <p> and closing </p> tags in the following example create a box containing the text “Hey now!”
<p>Hey now!</p>
In the following example the opening <a> and closing </a> tags create a box containing the text “Stack Overflow.”
a href="http://www.stackoverflow.com">Stack Overflow</a>
For any box of any size, its contents are affected by any styles you specify for that box. So if you write…
p {
color: purple;
}
…all the text enclosed by an opening <p> tag or a closing </p> tag will be, God help you, purple.
…unless you make an exception. For example, you can write…
.sane-color {
color: black;
}
Then, although the general style for paragraphs is still purple, any text enclosed by a tag that begins <p class="sane-color..." will be black.
Or you could write…
<p>This is <span class="sane-color">not</span> a pretty sentence.</p>
…and you’ve created a span box within the paragraph box that colors the word “not” black, while the rest of the sentence is purple.
Here’s some styling for the biggest box, the box that contains everything else, the body.
body {
width: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
background-color: white;
color: black;
}
Since the body is the biggest box, this bit of CSS means that all the text on the page, including all paragraphs, headings, table text, and list items, will be black on a white background, will be in the Georgia font or a variant, and will be based on the browser’s default text size.
…unless you make an exception. And of course, you might make all kinds of exceptions, on just about every level. For example, you can create a general style for paragraphs that differs from the default for all text established in the body style. Another example: when you explicitly call for purple text as a p style, all text enclosed in <p> tags is purple rather than the body’s default black. As you learned in an earlier chapter, you can also make exceptions to that rule by creating classes and IDs for paragraphs that specify different characteristics.
Later I’ll discuss the width: 100% and font-size: 1em specifications in the body style shown above. But first we need to talk about how to create the big sections, like the header and main sections, shown in the diagram above.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/60.html
http://www.ASmarterWayToLearn.com/htmlcss/59.html