Errata

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*='://']

missing semicolon after padding-left: 1.4em

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)
}

"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.

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

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

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

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

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

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.

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.

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;

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.

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

"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.

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

"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";

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.

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.

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.

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

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 figure reference. Should be 8-18 instead of 8-17.

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

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

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

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

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-12 instead of 8-11.

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

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

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.

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

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

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.

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."

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)"

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

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

.hat figcaption b
....
bottom: 0

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

.hat figcaption {
....
bottom: 0

However, it needs to be be

...
bottom: 0;

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.

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);

Replace

<div class="article">

with

<div id="article">

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

should probably be replaced with

font-family: Baskerville, Palatino, serif;

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.

Looks like font-family includes Arial by mistake.

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 "[".

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.

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.)