abergquist (177) [Avatar] Offline
#1
I've got the following in PageHeader.html:

<!doctype html>

<head>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
</body>

(per Listing 1.2 on p. 3) and, per Listing 1.5 on page 6, the following in styles.css:

.page-header .title {
  color: red;
}

.title {
  color: green;
  text-decoration: underline;
}

"Wombat Coffee Roasters" is correctly underlined per the CSS declaration "text-decoration: underline;" in the .title declaration block.

According to Figure 1.3, though, it's supposed to be in red. It's showing up in green for me (see attached screen shot). Cleared cache but it still appears in green.

Am I missing something obvious?

TIA

P.S. I got the same results in Firefox, Chrome and I.E.
Keith J Grant (30) [Avatar] Offline
#2
It looks like you’re missing the `<header class="page-header">` element. Without this, the `.page-header` portion of your selector doesn’t match against any elements on the page. That portion of your markup should look like:

<body>
  <header class="page-header">
    <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
  </header>
</body>


When in doubt, you can always compare against the code listings repository: https://github.com/CSSInDepth/css-in-depth/blob/master/ch01/listing-1.5.html
abergquist (177) [Avatar] Offline
#3
Yes, my bad; long day yesterday ...

Thanks