Organizing a CSS File

A plain text file whose name ends in .css and that holds only CSS rules is called an external style sheet. It has no required sections and no special header. The browser reads it from top to bottom, and that order is the one structure that matters: when two rules set the same property on the same element with equally specific selectors, the later rule wins.

So the way you arrange a CSS file is mostly for people, but the order of the rules is also for the browser. A good arrangement puts general rules first and rules for particular parts of the page later. A later rule can then refine an earlier one, and a reader can find each rule quickly.

The Book Club Page Grows

The book club page now has a header with a navigation bar, and its content sits in a <main> element. Here is the HTML, index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Club</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Monthly Book Club</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Books</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <main>
    <p>Join us on the first Friday of every month to talk about one book.</p>
    <button class="button">Reserve a seat</button>
  </main>
</body>
</html>

And here is style.css, arranged from the most general rules to the most specific:

@import url("base.css");

body {
  background-color: linen;
  color: dimgray;
}

header {
  background-color: darkgreen;
  color: white;
  padding: 16px;
}

nav a {
  color: white;
  margin-right: 16px;
}

main {
  padding: 16px;
}

.button {
  background-color: darkgreen;
  color: white;
  border: none;
  padding: 10px 20px;
}

Two selectors here are new. The selector nav a matches every link that sits inside a <nav> element, and chapter 13 explains this kind of selector. The selector .button, with a leading dot, matches every element that has class="button", and chapter 2 explains class selectors.

The file base.css, saved in the same folder, holds the rules that every page of the site shares:

body {
  margin: 0;
  font-family: Georgia, serif;
}

The browser renders a dark green header across the full 1280px width of the window and 130px tall, with the white heading and three white links inside it. Below it, the paragraph text is dim gray in Georgia, and the button is the same 130px by 35px green box as before. Notice that the heading is white even though no rule sets its color. Text color passes down from an element to the elements inside it, so the heading takes the white color of the header that contains it.

The Parts of the File, from Top to Bottom

Import rules come first. The @import rule at the top tells the browser to load another style sheet, base.css, as if its rules were written at that point. A rule that starts with @, called an at-rule, gives the browser an instruction instead of styling elements directly. A relative path in @import is resolved from the CSS file that contains it, not from the HTML page.

@import must come before every other rule in the file. Only @charset and @layer statements may come before it; the cascade lesson in chapter 2 introduces @layer briefly. If you move the @import line below the body rule, the browser ignores it without any warning, and in this example the page loses its Georgia font and gets back the default 8px gap around its edges.

Because the imported rules count as written at the top, every rule in style.css comes after them. If base.css set the heading to crimson and 40px, and style.css then set it to dark green, the heading would be dark green but still 40px: the later rule wins only for the property it sets again.

General page rules come next. The body rule sets the background and the text color for the whole page. Many elements inside the body take on its text color and font, so these settings become the default for the rest of the file.

Then rules for each part of the page. The header, nav a and main rules style the large areas of the page. Grouping them in the order they appear on the page makes them easy to find.

Reusable pieces come last. The .button rule styles any element with the class button, wherever it appears. Pieces like this, such as buttons, cards and badges, are often called components.