HTML and CSS Reference
<h1 class="page-title" >Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at rock-bottom
prices for the discerning costumed crime-fighter. From belts to boomerangs,
we're your one-stop shop for all your specialized gadgetry and costuming
<p>Come browse our wide selection of capes, cowls, masks, boots, belts,
gloves, tights, unitards, and leotards in all the colors of the rainbow.
Our clothiers are on call 24 hours a day, always ready in a pinch to
replace a singed cloak or patch a ripped tunic, because we know crime
doesn't sleep and justice can never rest.</p>
The “page-title” class distinguishes a page title from any other headings that may appear on a page,
including any other h1 elements that might occur inside other sectioning roots. It also gives us a
convenient way to style page titles in CSS, and we can use this class with any level of heading to
designate that heading as the title of the page, even if it's an h2 , an h3 , or even a caption or legend
element if the need should arise. The “page-title” class disconnects the title's styling from whatever
element it happens to appear on. This simple class is a tool we can use over and over again.
When you design a website, you're not only designing a collection of individual pages, you're designing an
entire system of movable, modular, reusable components. As you're planning and constructing your
templates, be on the lookout for patterns that you can repeat. Not graphic patterns like checkerboards or
polka dots or paisley, but markup patterns that follow the same structure for the same kind of content
wherever it occurs. This is called a design pattern in programming speak (again, not to be confused with
graphic patterns). A design pattern solves a common problem so you can repeat that solution whenever
the same problem comes up again, and the concept applies to markup as well. Identify common types of
content and establish a flexible pattern that you can reuse each time that type of content appears.
Power Outfitters is an imaginary e-commerce site so it will need to display a lot of products (sadly, the
products are also imaginary). We can establish a general pattern for how to mark up products, then follow
that pattern throughout the site wherever and whenever we need to display a product. This consistency in
our markup helps us maintain consistent styling and behavior throughout the site. Furthermore, in a
complex dynamic site—which Power Outfitters would be if it were real—each product box would be
programmatically generated from a common template and filled with dynamic content served from a
database. Establishing this markup pattern now will save development time later because we won't have
to ponder the same decisions over and over again.
On our website, a product will almost always be displayed with a name, an image, a short description, a
price, a link to a product details page, and an “Add to Cart” button. We can vary the pattern as needed and
those variations can form patterns themselves—a product without an image, a product with both a regular
price and a sale price, a product without a cart button, and so on—but let's start with the basics.
The product image will be an img element, naturally, with a descriptive alt attribute. We can enhance it
further with the figure element (introduced in Chapter 4) to semantically associate that image with the
product name and description. After all, the picture is a figurative representation of a product. The title (a