CSS Cookbook, 3rd Edition

Chapter 13. Designing with CSS

Introduction

Although web builders often spend a lot of time working around browser bugs and reading about the latest tricks from the gurus, it is worth remembering that first and foremost we’re designers and CSS is simply a way to turn design ideas into reality.

CSS is the perfect technology for grabbing website visitors’ attention. With CSS, instead of hacking HTML tables and slicing images to create eye-catching designs, you can go further with valid markup and still save on file size by ditching excess HTML and images. In short, you can do what any professional web designer should: create maximum impact with minimal resources.

At a basic level, a developer can learn all there is to know about CSS syntax and the technical limitations of the technology. But let’s never forget that code merely implements the design. At its heart CSS is a visual language, and with that comes the need to understand, at least in some small way, how to use design principles with CSS.

With that in mind, this chapter explains how to design with CSS. Specifically, this chapter describes several methods for capturing attention through CSS-enabled techniques, including how to lead the eye with contrast, use excessively large text, create word balloons out of quotations, and use different image formats to create cohesive presentations.

Enlarging Text Excessively

Problem

You want to draw attention to a web page by enlarging some of the text, as shown in Figure 13-1.

Figure 13-1. An ...