A Smarter Way To Learn HTML & CSS(2015)
61
Layout: divs
All the boxes that constitute an HTML layout are contained in the big box created by the opening <body> and closing </body> tags—the tags that begin and end the main section of every HTML document. In the diagram in the last chapter, you saw some relatively large boxes nested inside the big outermost Body box. What the diagram doesn’t show is all the smaller boxes nested inside these relatively large boxes. The smaller boxes are created by the opening and closing tags for headings, paragraphs, list items, and so on.
So how do you create the relatively large boxes, for the header, navigation section, main section, and so on—the boxes shown inside the big Body box in the diagram?
You create these boxes by using div tags. For example:
<div id="content">
<h3>The slow loris.</h3>
<img src="slow-loris.jpg" alt="Slow loris" width="55" height="85">
<p>Slow lorises are a group of several species of primates which make up the genus Nycticebus.</p> </div>
In the example, there are three elements grouped together inside the div—a heading, an image, and a paragraph. Just as any styling that you specify for the body will be applied to all elements contained in the body unless you make explicit exceptions, any styling that you specify for the div will be applied to all elements inside the div unless you make explicit exceptions. In the HTML code above, I’ve created a div with an id of “content.” I’ll style the div with a color.
div#content {
color: red;
}
With this style, the heading and paragraph text in the div will be red—unless you create exceptions. An exception would be if you’ve explicitly specified a particular color for h3 headings or a particular color for paragraphs. Then those specifications will override the default color that you’re specifying for the div.
Styling precedence works like this:
· Styling for an inner box overrides styling for an outer box. For example, in the last chapter we specified black as the color for all the text in the body. Black is the color unless otherwise specified. This default is overridden by the div we created above, which calls for red text. So now the default color for all the text in the div is red.
· Styling for an element, like a paragraph, overrides styling for a div. This is really the same rule as the first rule above, since the box created by tags is inside the box created by the <div> tags, and the rule says that styling for an inner box overrides styling for an outer box. Styling for the div says black, but we create a style for all p elements that says purple, the purple paragraph style will override the div black style.
· Class and id styling override general styling. If we create a “sane-color” class of paragraphs, the general purple specification for paragraphs is overridden for any paragraphs whose tag begins <p class="sane-color…"
Why did I create an id for the div rather than a class? Because this particular div—the one that contains all the content on the page—occurs just once in the document. A class can be used more than once, an id only once. If we were styling a div that might occur more than once in the HTML, we’d create a class rather than an id.
As you’ve seen in this chapter, a div is handy for setting default styling within a section, but the most important function of divs is layout positioning. That’s next.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/61.html