CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 254

Concise selectors are where you will see your correct application of HTML5's se-
mantic elements coming back to save you time in the long run. Instead of creating com-
plex selectors or relying on classes or IDs to pick out certain kinds of content, you can
apply the styles directly to em , strong , article , aside , and so forth, without any
deeper specificity needed. Obviously, if you wanted to target a particular kind of article
or aside, that is where classes (and possibly IDs) would come into play, but first look at
what content can be grouped together using semantic HTML elements, then attributes,
and then custom IDs or classes.
CSS Box Model
Now that we've thoroughly covered selectors, you should have a thorough understand-
ing of how to access your HTML from CSS. At this point, there is another fundamental
concept that is worth exploring—the CSS Box Model.
As far as CSS is concerned, the HTML elements that make up a web page are con-
tained within a rectangular box that determines its position in relation to the other ele-
ments on the page. This paradigm of laying out the page's content in boxes is where
the CSS Box Model gets its name. There are three main types of boxes in this model:
block-level , line-level , and inline-level . To visualize how these differ, imagine a para-
graph of text. By default, a block-level box is constructed around the whole paragraph,
a line-level box is constructed around each separate line of text in the paragraph, and
an inline-level box is constructed around each word in a single line of text. This is how
CSS sees the content and lays it out, but this differs slightly from how you will use the
Box Model. You will wrap the content you want to manipulate from CSS in an HTML
element, such as a p element for the whole paragraph or an em element for an individual
word in the paragraph. You'll then use a selector to stylize these elements. Typically this
means you will be dealing with block-level or inline-level boxes. Line-level boxes are
not something you get easy access to (although there is the ::first-line selector),
so just make a mental note that they are something CSS is using internally to lay out
content. You may wrap more than one word in an em , maybe even a whole line, but this
will still be viewed as an inline-level box, because it may or may not take up the entire
line of text.
Block-level boxes are the most commonly encountered type of box. When styling an
element inside a block-level box, you will have access to CSS properties for padding,
a margin, and possibly a border sandwiched between the two. Outside the box are po-
sitioning properties that can be used to offset the box away from its default position. 8
Inside the box are width and height properties used to set the size of the box. All these
properties are shown in Figure 6-11 .