Cover by Jennifer Niederst Robbins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Chapter 18. CSS Techniques

By now you have a solid foundation in writing style sheets. You can style text and element boxes, create page layouts using floats, and even add subtle animation effects to your designs. But there are a few common CSS techniques that I want you to know about before we move on to learning about JavaScript in Part IV.

This chapter is a grab bag of sorts. It starts with some techniques that are part of the web developer’s basic toolkit: clearing out browser styles with a CSS reset, using images in place of text (only when necessary!), and reducing the number of server requests with CSS sprites. It moves on to general approaches and special properties for styling forms and tables. Finally—and I’ve saved the best for last—you’ll get to use media queries to create a responsive site in step-by-step exercises.

A Clean Slate (CSS Reset)

As you know, browsers have their own built-in style sheets (called user agent style sheets) for rendering HTML elements. If you don’t supply styles for an h1, you can be certain that it will display as large, bold text with space above and below. But just how much larger and how much space may vary from browser to browser, giving inconsistent results. Furthermore, even if you do provide your own style sheet, elements in your document may be inheriting certain styles from the user agent style sheets, causing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required