Chapter Three · Look
CSS: Style and the Cascade
CSS from the first rule: how a stylesheet reaches every page, how selectors pick elements, how the cascade settles conflicts, how colour, units and type make text readable, and how a few named tokens hold a whole design together.
Your site now says what every part of it is, and it looks like every unstyled page ever made. CSS is the language that changes that, and it has a reputation for being unpredictable, because rules sometimes seem to be ignored. They are not. Every style on a page is the result of a short, fixed procedure the browser runs for each element, and once you know the steps, and where DevTools shows them, a style that will not apply stops being a mystery and becomes a question with an answer.
Five topics. How a rule is built and how one linked stylesheet styles the whole site. The selectors that pick which elements a rule applies to, including the focus style every keyboard user depends on. The cascade, specificity and inheritance: who wins when rules disagree. Colours, units and fonts, and the choices that keep text readable for someone who needs it larger. And custom properties, the named tokens that let one edit restyle every page.
Topics in This Chapter
:hover and :focus-visible, and :has().!important makes things worse.rem, font stacks and web fonts, readable line length and spacing, and a first word on contrast.var(), how fallbacks and scope work, and changing a whole site from DevTools.