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 ...
Get Learning Web Design, 4th 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.
