Chapter 2: Designing Pages

In This Chapter

check.png Setting CSS for boxes

check.png Creating page layout elements with ID styles

check.png Using class styles for layout

check.png Working with media queries

The secret behind web-design technique is that most web pages are essentially laid out in a two- or three-column format, using the 960-pixel-wide grid that we discuss at length in Book II, Chapter 1. With that concept in mind, this chapter explains how to design pages with CSS. We break down the CSS properties required to create page layout elements that locate and shape content on a page. And we show you how to use ID and class selectors, special selectors that are applied to DIV tags in HTML documents, to define page design elements.

CSS for Page Layout Elements

As we allude to in Chapter 1 of this minibook, CSS is where it’s at when it comes to designing page layouts. Not only can you style text (with fonts, colors, spacing, and so on), but you can also define page layout elements — essentially boxes that hold page content using CSS.

How is that done? Any HTML tag can have attributes attached to it with CSS that ...

Get Building Websites All-in-One For Dummies, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.