Creating a Website: The Missing Manual, 4th Edition

Chapter 7. Designing Better Style Sheets

You’ve covered a lot of ground with CSS. You’ve used it to set colors, fonts, borders, and more, and you’ve applied your settings with carefully targeted class rules. But CSS isn’t just a way to make stylish web pages; it’s also a way to apply a consistent design to your entire site.

In this chapter, you’ll lay the groundwork you need to build a modern, CSS-powered website. You’ll deepen your understanding of style selectors, and create a properly organized style sheet that suits a whole site’s worth of pages, not just a single document.

All this hard work has significant rewards. If you structure your pages and organize your styles with care, you can create a flexible, adaptable site. You won’t break a sweat when it comes time to change something—whether you need to move a sidebar, change the size of a heading, or revamp everything, extreme-makeover style.

Planning a Style Sheet

You’ve already picked up the basic skills of style-sheet writing. You know how to create an external style sheet and attach it to as many web pages as you want with the <style> element. You’ve also had plenty of practice writing style rules—the formatting instructions that make things happen. But even though you know what style sheets can do, you’re probably less sure about building a practical one—one that condenses complex formatting down to a simple set of rules but remains flexible enough to grow with your website.

That’s OK. Creating style sheets is an art and takes ...