1 Cascade, specificity, and inheritance

 

This chapter covers

  • The six criteria that make up the cascade
  • The difference between the cascade and inheritance
  • How to control which styles apply to which elements
  • Common misunderstandings about shorthand declarations
  • Working with new and upcoming CSS features

CSS is unlike a lot of things in the world of software development. It’s not a programming language in the conventional sense, but it does require abstract thought. It’s not purely a design tool, but it does require some creativity. It provides a deceptively simple declarative syntax, but if you’ve worked with it on any large projects, you know it can grow into unwieldy complexity.

When you need to learn to do something in conventional programming, you can usually figure out what to search for (for example, “How do I find items of type x in an array?”). With CSS, it’s not always easy to distill the problem down to a single question. Even when you can, the answer is often, “It depends.” The best way to accomplish something is often contingent on your particular constraints and how precisely you’ll want to handle various edge cases.

While it’s helpful to know some tricks or useful recipes you can follow, mastering the language requires an understanding of the principles that make those practices possible. This book is full of examples, but it is primarily a book of principles.

1.1 The cascade

1.1.1 Stylesheet origin

1.1.2 Inline styles

1.1.3 Selector specificity

1.1.4 Source order

1.2 Inheritance

1.3 Special values

1.3.1 The inherit keyword

1.3.2 The initial keyword

1.3.3 The unset keyword

1.3.4 The revert keyword

1.4 Shorthand properties

1.4.1 Beware shorthands silently overriding other styles

1.4.2 Remember the order of shorthand values

1.5 Progressive enhancement

1.5.1 Using the cascade for progressive enhancement

1.5.2 Progressively enhancing selectors

1.5.3 Feature queries using @supports()

Summary

sitemap