Learning Web Design, 6th Edition

Chapter 21. More CSS Techniques

21

More CSS Techniques

In this chapter

Styling tips for forms

Using a CSS reset or normalizer

Strategies for supporting older browsers (@supports)

Creating your own custom properties

Nesting CSS rules

Setting priority with CSS layers

CSS frameworks

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 Layout, and even add subtle animation effects to your designs. But there are a few more CSS techniques and features that you should know about.

If you look 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. Then you’ll learn how to clear out default browser styles with a CSS reset. We’ll also discuss strategies for supporting older browsers, including using @supports to test for the support of a particular feature. Finally, we’ll round out the chapter with introductions to some newer CSS features like variables, nesting, and layers as well as a quick introduction to CSS frameworks. Let’s dig in!

Styling Tips for Forms

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