Errata

The <link> tag at step 9 uses double-quotes with the "href" and "rel" attributes, while at step 8, single-quotes are used.

font-family: 'Varela Round', 'Arial Black', serif;
should be changed to
font-family: 'Varela Round', 'Arial Black', sans-serif;

(There are many usages of this font stack in the book and code samples.)

Replace

.btn {
border-radius: 5px;
font-family: Arial, Helvetica, serif;
font-size: .8 em;
}

with

.btn {
border-radius: 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: .8em;
}

I.e., 1) There should be no space before em, and 2) font-family should probably be updated as shown above.

Replace
Word docs ([a href$=".doc"]), movies (a [href$=".mp4"])
with
Word docs (a[href$=".doc"]), movies (a[href$=".mp4"])

1. Move tag name outside of brackets. 2. Remove spaces between "a" and "[".

Hi! I think there is some mistake in CSS The Missing Manual 3ed & 4ed. In 4ed. book at page 70 was written that I can only once use :not() with the selector. But my example illustrates that it's wrong, not only one time. Here is my example code: http://codepen.io/anon/pen/dNKpQj Your Sincerely,
Alexey Grigoriev

The first tag in the HTML snippet actually reads '<div class="article">', but should read '<div id="article">'.

Looks like font-family includes Arial by mistake.

Actually, it looks like serif fonts were included in the font-family by mistake, not Arial. Probably this was intentional, but then a brief explanation would clear up some confusion.

font-family: Baskerville, Palatino, sans-serif;

should probably be replaced with

font-family: Baskerville, Palatino, serif;

Replace

<div class="article">

with

<div id="article">

The first line of HTML code in "Avoiding Specificity Wars" should be <div> id="article" NOT <div class-"article". The following discussion is about the problems of using DIV in that location. The code at the bottom of page, where is uses <div class="article" is correct.

missing semicolon after padding-left: 1.4em

Replace declaration
border-bottom: 2px white solid;
With
border-bottom: 2px solid white;

The font files have .eot extension, while the code examples use .woff2 and .woff extensions only.

It says "it calculates the line height by multiplying the font size (1.75 em) and 1.5" - but the font-size set for the paragraph on page 177 is 1.8em.

Colon is missing - «margin: 0; padding 0;» should be «margin: 0; padding: 0;»

Bottom left image has doubled semicolon in the property, should be "background-clip:border-box;" instead.

Wrong figure reference. Should be 8-11 instead of 8-10.

Wrong figure reference. Should be 8-12 instead of 8-11.

Wrong figure references. Should be 8-12 instead of 8-10 in first paragraph and 8-12 instead of 8-1 in second paragraph.

Wrong figure reference. Should be 8-14 instead of 8-13.

Wrong figure reference. Should be 8-18 instead of 8-19.

Wrong figure reference. Should be 8-18 instead of 8-17.

Wrong figure reference. Should be 8-18 instead of 8-17.

Wrong image reference, should be Figure 8-13 instead of 8-12.

Wrong image reference, should be Figure 8-13 instead of 8-12.

Wrong image reference, should be "Figure 9-8, bottom" instead of "Figure 9-9, bottom". Plus the image in figure 9-8 is a duplicate of the Figure 9-7, which is wrong.

Text states:

Another method is to use the contains selector to look for :// anywhere within the URL like this:

a[href^='://']

The code snippet should actually be the following:

a[href*='://']

Text states:

Another method is to use the contains selector to look for :// anywhere within the URL like this:

a[href^='://']

The code snippet should actually be the following:

a[href*='://']

Text states:

Another method is to use the contains selector to look for :// anywhere within the URL like this:

a[href^='://']

The code snippet should actually be the following:

a[href*='://']

There is a reference to "(Figure 9.10, left)", but since the figure has only one image, so the word "left" is nothing but disorienting.

It refers to "see the circled areas of #1 in Figure 9-15" but the Figure 9-15 doesn't have circled areas at all.

"In the middle image in Figure 10-4, the image..." should be replaced to "In the right image in Figure 10-4, the image...".

Meanwhile caption to Figure 10-4 needs to be fixed:

- Replace "The box at left" with "The box at right";
- Replace "and at right" with "and at left";

All three CSS properties in the .button:active rule should be prefixed with "transform:".

So instead of
-webkit-translate(1px,2px);
-ms-translate(1px,2px);
translate(1px,2px);

it should be:
transform: -webkit-translate(1px,2px);
transform: -ms-translate(1px,2px);
transform: translate(1px,2px);

Tag <table> misses an attribute for border. It should look like this:
<table border="1px">
You see the border on the picture (figure 11-2), but there's no its attribute in the code.
And the border on the figure is collapsed - which does not happen in HTML (CSS is needed here).

Witten
[...] stocks .th to uniquely format [..]

Should be
.stocks th

The dot should be at the beginning of the class selector.

Wrong figure reference, should be Figure 11-7 instead of Figure 11-8.

The code section has 2 errors and should read:

.label {
display: inline-block;
width: 20em;
vertical-align: top;
text-align: right;
margin-right: 15px;
}

not

.label {
float: left; (Text is from a previous edition and needs updating)
width: 20em;
vertical-align: top;
text-align: right;
margin-right; 15px; (Should be a colon after margin-right not a semicolon)
}

line " border: none; " missing
following sentence refers to 'setting border to none..'
and finished example includes this line

"Designers used HTML tables to build a kind of scaffolding for organizing a page's contents (see Figure 12-2)." - wrong reference, since the Figure 12-2 doesn't demonstrate any usages of tables.

It says "This div holds the page's main content", but we are using the <article> tab, not the <div> tag.

It says "Say you want a central block of text positioned 10 percent from the top of the windows and 10 pixels from both the left and right edges of the window." - but further text and the example at Figure 14-3 imply 10 percent from the left and right edges, instead of pixels.

.hat figcaption {
....
bottom: 0

However, it needs to be be

...
bottom: 0;

.hat figcaption b
....
bottom: 0

However, it should be:
....
bottom: 0;

Figure 14-7 (right) illustrates the <figcaption> tag position at the bottom of the <figure>, while the code at pages 441 - 442 set it to bottom: 0;

I think there are two background-colors listed in steps $5 and #7...this was different from step #4.

"background-color: rgb(153,153,153)
background-color: rgba(153,153,153,.9)"

It says "The images don't quite fit, and hang outside the columns as pictured here." - But I can't see and hangings on the picture provided. In order to see this, user have to narrow the window width first.

It says: "From three columns to two columns, with one media query and three simple styles." - but the figure illustrates the render of query with only one style applied, the other two styles would make the two columns take the whole width and remove the right border of the main column.

The 2nd sentence on the page currently states:

"In addition, if you have more than one row, their total width must come to exactly 12 units."

The sentence should be corrected to use "column" instead of "row", i.e.:

"In addition, if you have more than one column, their total width must come to exactly 12 units."

"(additions in bold)" should be removed since it's the first time we are adding a code inside the min-width: 550px media query.

Second and third comment lines use wrong comment opening tag. It should be "<!--" instead of "<!-".

First and third comment lines use wrong comment opening tag. It should be "<!--" instead of "<!-".

It says "additions are in bold", but none is bold.

"@media (min-width: 500px) {" should be 400px, since our mixin uses $screen-small variable and the variable is set to 400px (same page above).

"Example: list-style: inside;" for list-style-position should be "Example: list-style-position: inside;" since it's about usage of the particular property, not the shorthand which was listed above.