HTML and CSS Reference
In-Depth Information
Building Blocks of CSS Layouts
In Chapter 5, through the discussion of the box model and floats, you
were introduced to some of the building blocks used to create layouts
with CSS. They weren't labeled as such, so what follows is a refresher and
a more complete list of building blocks at the core of working with CSS.
Content Is King
As powerful as CSS is, its only purpose is to describe presentation
for the underlying HTML content. Strong, semantically appropriate
markup is the foundation that allows CSS to work its magic.
Source order, or the order in which content is read when not styled, is
also an important consideration when considering which techniques
to use to style content. Some techniques may be easier to use to visu-
ally pull content from the middle of the document tree or from the
beginning or end of a section.
Creating Content Blocks
Chapter 6 introduced the position property and containing blocks.
When styling repeatable content items such as those found in product
listings or reusable user profile badges, it is often useful to manage these
items as discrete content blocks (or widgets), using position:relative
to create a distinct, self-referential space in which to work with the indi-
vidual components of the content item. This widget or block of markup
can be placed anywhere in a page and maintain its appearance. Figure 7.1
demonstrates this effect by creating a user badge in which the user's
photo is positioned in relation to the containing block.
Search WWH ::

Custom Search