Learning Web Design, 5th Edition

19. More CSS Techniques

19

More CSS Techniques

In this chapter

Styling forms

Style properties for tables

Using a CSS reset or normalizer

Image replacement techniques

CSS sprites

CSS feature detection

By now you have a solid foundation in writing style sheets. You can style text and element boxes, float and position objects, create responsive page layouts using Flexbox and Grid, and even add subtle animation effects to your designs. But there are a few more common techniques that you should know about.

If you look over at the “In This Chapter” list, you’ll see that this chapter is a grab bag of sorts. It starts with general approaches to styling forms and the special properties for table formatting. We’ll cover other tricks of the trade including clearing out browser styles with a CSS reset, using images in place of text (only when necessary!), reducing the number of server requests with CSS sprites, and checking whether a browser supports a particular CSS feature. Let’s dig in!

Styling Forms

Web forms can look a bit hodgepodge right out of the box with no styles applied (Figure 19-1), so you’ll certainly want to give them a more professional appearance using CSS. Not only do they look better, but studies show that forms are much easier and faster to use when the labels and inputs are lined up nicely. In this section, we’ll look at how various form elements can be styled.

Figure 19-1. Forms tend to be ugly and difficult to use with HTML alone. Don’t worry—this one gets ...