HTML and CSS Reference
In-Depth Information
CHAPTER 8
■ ■ ■
Creating Common Page
Elements
I
n the previous chapter we showed you several methods for laying out a page using CSS; you
now have a multitude of ways to push blocks of content around a page. But once you have the
necessary sections in the right places on your web page, you're going to need to put something
in those sections, right?
Let's take a moment to consider some of the items you'd find on any given web page:
•
Header strip (containing a logo)
•
Site search
•
Top-level (horizontal) navigation
•
Breadcrumb trail/“You are here” indicator
•
Secondary navigation (usually left- or right-aligned)
•
Main page heading
•
Body content and subheadings
•
Images and links with hover effects
•
Sidebars/callout boxes with rounded corners
This is not an exhaustive list, but it covers most of what you'll likely need on a web page.
Some of the items are just smaller examples of a larger topic. For instance, a site search that
sits in a page header is probably just a text input and a button and is therefore a form, but is
usually treated in a different way (visually) from a “proper” form, as in one that captures a raft
of data from a user (forms have their own chapter in this topic—see Chapter 11).
So we're focusing on small, specific parts of a web page, but these are things that you'll
need to do again and again on different sites that you work on—and you'll need to do them
visually different each time. This chapter is all about showing you the ways that you can
accomplish this goal in CSS.
163
