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

<!doctype html>

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

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

(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?


P.S. I got the same results in Firefox, Chrome and I.E.
Keith J Grant (36) [Avatar] Offline
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:

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

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 (181) [Avatar] Offline
Yes, my bad; long day yesterday ...

dickbaker@totalise.co.uk (4) [Avatar] Offline
Listing 1.5 callout 3 does not work in my browsers (Kindle Silk or W10 Chrome) i.e. no popup.

I flagged this to Manning Support and got this unhelpful reply (left/right-hand disconnected?)

Hello Dick,

I am very sorry to hear this. Have you by chance posted this in our author online forum?

Manning Support