Errata

CSS: The Missing Manual

Errata for CSS: The Missing Manual, Fourth Edition

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
xxI
Missing CD floes

I just purchased the CSS missing manual 4th edition. I went to www.missingmanuals.com to download the files for the book. When I clicked on Download all tutorial files there, I got the message: The requested URL /0636920036357/CSS4e_MM_TUTORIALS.zip was not found on this server. The book is useless without the files. Thank you.

David Lees  Oct 28, 2015 
Printed Page xx
last paragraph

Figure I-1
should read
Figure P-1

The related Figure is at the top of the following page xxi

Dcunn48  Apr 15, 2016 
Last paragraph

The text mistakenly shows "h2+p" in the last paragraph of the page on sibling selectors when it intended to how "h2~p":

There’s another sibling selector called the general sibling combinatory selector (say that three times fast). It’s simply a ~ (tilde) and it means “select all siblings of this type.” For example, while h2 + p selects a single <p> tag that immediately follows an <h2> tag, h2+p selects all <p> tags that are siblings (that is, on the same level) of the h2.

Scott Knick  Jul 25, 2016 
Printed Page xx
paragraph labeled "clicking"

It says that the book has "three kinds of instructions that require you to use your computer's mouse or trackpad," but then goes on to list five kinds.

Phil Marshall  Aug 26, 2017 
PDF Page 5
NA

I found this error when I was talking to other people and just writing through out the years.

Anonymous  Oct 28, 2021 
PDF Page 5
NA

I found this error when I was talking to other people and just writing through out the years.

Anonymous  Oct 28, 2021 
Printed Page 34
Step 8

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

Anthony Browne  Oct 23, 2016 
Printed Page 35
1st Note

Words "dusty brown" should be changed to "blue".

Roman Boiko  Aug 25, 2015 
Printed Page 35
Step 11

The "font-family" attribute value should be "Varela+Round" instead of "Varela Round".

Anthony Browne  Oct 23, 2016 
PDF Page 36
step 11

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

Roman Boiko  Aug 25, 2015 
PDF Page 45
last code sample

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.

Roman Boiko  Aug 25, 2015 
52
First paragraph and first code fragment after TIP.

(This is the HTML version I can access via Your Products > Search Inside and Read, which I assume is the same as Safari Books Online. The page number is from the PDF file.)

The PDF version correctly says:

Once you create an external style sheet, you must connect it to the web page you
wish to format. To do so, use the HTML <link> tag like this:

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

The HTML incorrectly says:

Once you create an external style sheet, you must connect it to the web page you wish to format. To do so, use the HTML <link> tag like this:rel="stylesheet”

<link href="css/styles.css">

The text:
rel="stylesheet”
migrated from inside the code fragment to the end of the previous paragraph.

PSRC  Apr 09, 2016 
PDF Page 61
The first paragraph

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

Roman Boiko  Aug 27, 2015 
PDF Page 61
The last paragraph

Replace

To select only the first <h2> tag, your child selector looks like this: body > h2. If you
want the second <h2> tag, then you must use this child selector instead: div > h2.

with

To select only the first <h2> tag, your child selector looks like this: div > h2. If you
want the second <h2> tag, then you must use this child selector instead: body > h2.

Roman Boiko  Aug 27, 2015 
PDF Page 70
end of page

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

Alexey Grigoriev  Feb 04, 2017 
ePub Page 71
The HTML snippet between the first and second paragraphs

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

Bruce Kritt  Dec 23, 2015 
PDF Page 73
Step 6

Replace

With four CSS properties

with

With three CSS properties

Roman Boiko  Aug 31, 2015 
PDF Page 74
step 3

Looks like font-family includes Arial by mistake.

Roman Boiko  Aug 31, 2015 
PDF Page 74
step 3

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.

Roman Boiko  Aug 31, 2015 
PDF Page 75
steps 3, 4

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

should probably be replaced with

font-family: Baskerville, Palatino, serif;

Roman Boiko  Aug 31, 2015 
Printed Page 80
First Paragraph

Sentence states the following:

"On the selectors_basics.html page, you applied...."

It should read as follows:

"On the selector_basics.html page, you applied...."

Jeff  Jun 12, 2019 
PDF Page 83
Figure 3-14

The final screenshot doesn't have orange applied to .note strong elements.

Roman Boiko  Aug 31, 2015 
Printed Page 90
sect 2. Add another...

Discrepancy in color setting

Color is set

p {
color: rgb(92,122,142)
}

but on p 94 the color is now

.. rgb(50,122,167)

It is also this color in '04 finished' example

Iain Simpson  Mar 03, 2017 
PDF Page 94
Step 2

Word "margin" looks confusing when it actually refers to a padding property:

You’ll indent the paragraphs on the page by adding a left margin.

Roman Boiko  Aug 31, 2015 
Printed Page 95
Figure caption

At the end of the figure caption, and several other locations of the text, it refers to Appendix A and how it lists whether properties are inherited or not. I was not able to find this item in any properties (re: inheritance).

Mike Olgren  Mar 05, 2017 
PDF Page 108
1st code sample

Replace

<div class="article">

with

<div id="article">

Roman Boiko  Sep 01, 2015 
Printed Page 108
1st coding example

Replace <div class="article"> with <div id="article">

Steven Seyler  Dec 07, 2015 
Printed Page 108
1st html example

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.

Andrew Brandt  Oct 15, 2016 
PDF Page 108
The first snippet

Say, for instance, your page has this snippet of HTML:
<div class="article">
<p>A paragraph</p>

to be changed to

<div id="article">

poika  Sep 19, 2017 
PDF Page 110
last paragraph

Delete the following:

, and removing bold text formatting

Roman Boiko  Sep 01, 2015 
Printed Page 110
in the CSS style for the ul selector

missing semicolon after padding-left: 1.4em

rborup  Mar 02, 2018 
Printed Page 112
code, 2nd to last line

The font-family includes "Arial Black." You might want to point out that Arial Black does not work in current version Firefox (51).

Mike Olgren  Mar 05, 2017 
Printed Page 114
Step 2. coding example

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

Steven Seyler  Dec 07, 2015 
PDF Page 115
Figure 5-7 caption

Replace

in the left column of this page.

with

on this page.

Roman Boiko  Sep 01, 2015 
Printed Page 131
Last paragraph and code sample that follows it

Last paragraph on page states:

"You have a TrueType file named League_Gothic-web font.ttf inside a fonts folder on your site."

However the code used to demonstrate this is the following:

@font-face {
font-family: "League Gothic";
src: url('fonts/League_Gothic-web font.woff');
}


The paragraph and code should site the SAME font file:
Either BOTH League_Gothic-web font.ttf or BOTH League_Gothic-web font.woff.

Jeff  Jun 12, 2019 
Printed Page 132
Last paragraph

Sentence states:

"Unfortunately, if you want to support older browsers, phones, and tablets, the syntax that is a bit complicated."

It should read as follows:

"Unfortunately, if you want to support older browsers, phones, and tablets, the syntax for that is a bit complicated."

OR

"Unfortunately, if you want to support older browsers, phones, and tablets, the syntax is a bit complicated."

Jeff  Jun 12, 2019 
Printed Page 136
-The Easy Way to Add Bold and Italic - coding example

Replace

src: url('PTSansRegular.woff2') format('woff2'),
url('PTSansRegular.woff') format('woff'),

With

src: url('PTSansRegular.woff2') format('woff2'),
url('PTSansRegular.woff') format('woff');

note: source declaration not closed with a semicolon

Steven Seyler  Dec 08, 2015 
Printed Page 136
Second "note".

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

Boris  Feb 21, 2017 
Printed, PDF, ePub, Mobi, , Other Digital Version Page 142
Tip box at bottom of page

The URL for the mentioned project should be updated.

Old URL: hellohappy.org/beautiful-web-type/

New URL: beautifulwebtype.com

The hellohappy domain has been purchased by a domain spammer who is using it to link to their essay writing services.

Chad Mazzola  Nov 20, 2018 
PDF Page 161

"The first value, 4px, means “place the shadow 4 pixels to the left of the text.”" should be
"The first value, -4px, means “place the shadow 4 pixels to the left of the text.”

Orfeo Da Via'  Sep 17, 2015 
Printed Page 174
@font-face definitions

All references to font-family PTSans should read PT+Sans. There is no PTSans font family. See also the reference in the HTM selector on page 175.
I suspect that there is a problem with the WOFF files under the "fonts" folder. I haven't looked under the "skins".
It took quite an effort to figure out why my text.html page and the "Finished" pages weren't rendering according to the ones laid out in tutorial.

Richard Wilkinson  Sep 10, 2017 
Printed Page 176
NOTE at bottom of page

Sentence reads as follows:

"If the web page doesn't seem to get updated when you update an external style sheet, pressing F5...."

It should read:

"If the web page doesn't seem to get updated when you update an external style sheet, pressing Ctrl+F5...."

...which accords with the information provided on page 25 regarding force reloading.

Jeff  Jun 18, 2019 
Printed Page 177
Step 5. coding example

Replace

font: normal 3.5em "Slabo 27px", Garamond, Times, serif;

With

font: bold 3.5em "Slabo 27px", Garamond, Times, serif;

Note: The text following the coding example specifies that the code example "makes the headline bold, 3.5ems tall, and..."

Steven Seyler  Dec 09, 2015 
Printed Page 178
1st paragraph

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.

Boris  Feb 24, 2017 
Printed Page 183
Step 5

The h2 color property is missing.

The second line should be:

color: rgb(37,76,143);

Nick Sofolarides  Nov 16, 2015 
Printed Page 188
Last line of the Note

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

Boris  Feb 25, 2017 
Printed Page 216
4th paragraph

The paragraph starts with "You'll start with a very basic HTML file containing an internal style sheet..."

This should be: "You'll start with a very basic HTML file that uses an external style sheet..."

There are no <style> tags in the HTML file, and it links to an external style sheet main.css.

Mike Olgren  Mar 05, 2017 
Printed Page 224
First paragraph in the step 4.

It says ..."see step 4 on page 18.)" but it should be "see step 4 on page 218.)" instead.

Boris  Feb 26, 2017 
Printed Page 234
2nd paragraph after Figure 8-2

It says that the property accepts four values, but on page 236 we can see two more values: "round" and "space" without any explanations why are there extra two.

Boris  Feb 27, 2017 
Printed Page 244
Figure 8-11

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

Boris  Feb 27, 2017 
Printed Page 245
1st paragraph

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

Boris  Feb 27, 2017 
Printed Page 245
Last paragraph

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

Boris  Feb 27, 2017 
Printed Page 246
1st and 2nd paragraphs

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

Boris  Feb 27, 2017 
Printed Page 246-247
bottom bullet of page 246, top 2 bullets of page 247

The figures referred to in the background-size section are incorrect.

background-size: 100% 100%; refers to Figure 8-11, left
background-size: contain; refers to Figure 8-10, middle
background-size: cover; refers to Figure 8-1, right

All should refer to Figure 8-12, however, the respective directions are correct.

Brandy Garland  Jul 18, 2017 
Printed Page 253
Last paragraph

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

Boris  Mar 02, 2017 
Printed Page 253-259
misc

References to figures 8.14 to8.18 inconsistent.
p253 foot of page 8-13 should be 8-14
p258 top of page 8-16 should be 8-17
p259 top of page 8-19 should be 8-18
p259 3rd para 8-17 should be 8-18
p259 75% down ('Closest-corner') 8-17 should be 8-18

Iain Simpson  Mar 17, 2017 
Printed Page 258
1st paragraph

Refers to Figure 8-16. Should refer to Figure 8-17.

Mike Olgren  Mar 05, 2017 
Printed Page 259
2nd paragraph

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

Boris  Mar 02, 2017 
Printed Page 259
3rd paragraph

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

Boris  Mar 02, 2017 
Printed Page 259
3rd paragraph

«The positioning values go before the color and AFTER shape keyword...»

Boris  Mar 02, 2017 
Printed Page 259
2nd paragraph from the end.

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

Boris  Mar 02, 2017 
Printed Page 264
Step #9 figcaption

Missing space between "and" and "should".

Boris  Mar 11, 2017 
Printed Page 269
1st paragraph

«With a wider window you can fit four or even five images on a row» - sounds a bit outdated for me. Since most users has resolution of at least 1366 x 768 pixels (which will allow them to see 5 images on a row) and others have resolution 1920 x 1080 pixels and greater, it would be more logical to replace the text to the following: «With a wider window you can fit five or even all six images on a row».

Boris  Mar 11, 2017 
Printed Page 276
Last paragraph

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

Boris  Mar 11, 2017 
Printed Page 277
First paragraph

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

Boris  Mar 11, 2017 
Printed Page 299
1st paragraph of 4th step

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.

Boris  Mar 25, 2017 
Printed Page 300
Figure 9-8 image

Figure 9-8 appears to have the image of Figure 9-7. The caption discusses the use of sprites. Shouldn't the image be that of a sprite? The current image does not really demonstrate anything...

Mike Olgren  Mar 05, 2017 
Printed Page 301
Top of page (first code snippet)

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

Jeff  Jul 22, 2019 
Printed Page 301
Top of page (first code snippet)

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

Jeff  Jul 22, 2019 
Printed Page 301
Top of page (first code snippet)

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

Jeff  Jul 22, 2019 
Printed Page 304
Paragraph in the step #6.

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.

Boris  Mar 26, 2017 
Printed Page 311
Paragraph of text in step #9.

We need to add a bottom border to the last link. And we have few ways to do that. But for the first way (of adding the border to the UL tag), the text says: "Since there's no padding on that tag, there's no space separating the top of the <ul> from the top of that first link." - according to my logic It should be "Since there's no padding on that tag, there's no space separating the BOTTOM of the <ul> from the BOTTOM of that LAST link."

Boris  Mar 27, 2017 
Printed Page 311
Pre-last paragraph

It says: "This descendant selector styles the link (a) that's inside the last list item (li:last-of-type) or the navigation list (.mainNav)" but since the link is inside the list item of the .mainNav and our selector looks like .mainNav li:last-of-type I consider this is a mistake and it should be fixed like this: "This descendant selector styles the link (a) that's inside the last list item (li:last-of-type) OF the navigation list (.mainNav)".

Boris  Mar 27, 2017 
Printed Page 315
Last paragraph

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.

Boris  Mar 27, 2017 
Printed Page 325
Figure 10-4

The images of this figure are correct. However, the caption and one word of text above the figure are incorrect. In the figure, the box on the left is a scaling of both horizontal and vertical (-1). The box in the middle is horizontal scaling (-1,1). The box on the right is vertical scaling (1, -1).

To correct this:
- In the third line from the top of the page, change "vertical" to "horizontal."
- In the caption change "The box at left..." to "The box in the middle..."
- In the caption change "...box in the middle..." to "...box at the right...".
- In the caption change "...and at right..." to "...and at left...".

Mike Olgren  Mar 26, 2017 
Printed Page 325
Second line of the 1st paragraph and caption for Figure 10-4

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

Boris  Mar 27, 2017 
Printed Page 326
2nd Paragraph

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

Jason Killian  Sep 11, 2015 
Printed Page 326
code in middle of page

Although the code should be fixed, the errata submitted by Jason Killian is incorrect. Vendor prefixes come FIRST. So the code in the middle of this page should be:

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

You prefix the PROPERTY, not the KEYWORD.

Mike Olgren  Mar 26, 2017 
Other Digital Version 334
last

First, let me just mention that I think the book is very good. It's my 3rd MM and I'm about to buy another.

The text states that, "Likewise, if you want to hover over one element but trigger an animation on another element, you're out of luck ...

So, what am I missing?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Trigger a Transition</title>
<style>
div {
width:100px;
height:100px;
background-color:red;
margin:10px;
}
.target {
background-color:black;
transition-duration:2s;
}
.trigger:hover ~.target {
background-color:red;
transition-duration:2s;
}
</style>
</head>
<body>
<div class="trigger">This is the trigger DIV.</div>
<div class="target">This is the target DIV.</div>
</body>
</html>

Anonymous  Feb 14, 2016 
Printed Page 350
top of page

-webkit-transfrom: scale(1.5);

should say:

-webkit-transform:scale(1.5);

brian carpenter  Sep 22, 2015 
Printed Page 353
number 6 code

There is a missing semi-colon in the fourth line of code. It should be:

left: 120%;

Also the bolding of this code is confusing, since it usually represents which code is new. At a minimum, the "50%", which replaces "to", should be bold.

Mike Olgren  Mar 31, 2017 
Printed Page 358
code

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

Zeljko Porobija  Nov 09, 2015 
PDF Page 361
The Note block at the bottom of the page

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

Should be
.stocks th

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

Tyoma Deev  Oct 23, 2015 
Printed Page 366
"Up To Speed" box

Wrong figure reference "See the examples at the bottom right and bottom center of Figure 11-7". There is no bottom row and there is no center images in Figure 11-7. Missing figure?

Boris  Apr 02, 2017 
Printed Page 368
First step, second line from the bottom

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

Boris  Apr 02, 2017 
Printed Page 369
Step 3 (Adjust the style.) code section.

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

Paul Burrows  Oct 17, 2017 
Printed Page 374
bottom paragraph

The text states "The next three lines add the vendor-prefixed versions..." The code does not include the vendor prefixes. In my versions of Firefox and Chrome, it still works. If you want to know the vendor prefixes for older versions you would add these two lines after the "background: rgb(229,76,16);" property:

background: -webkit-linear-gradient(to bottom, rgb(229,76,16), rgb(173,54,8));
background: -moz-linear-gradient(to bottom, rgb(229,76,16), rgb(173,54,8));

If you really want to be thorough, you can also add the -o- prefix for Opera.

Mike Olgren  Mar 31, 2017 
Printed Page 379
foot of page

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

Iain Simpson  Mar 17, 2017 
Printed Page 387
1st paragraph of «How CSS Layout Works»

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

Boris  Apr 03, 2017 
Printed Page 388
Last paragraph

It says "The elements that contain the logo and navigation bar in Figure 12-2 occupy the top of the page, so it makes sense to wrap a <div> tag around them.", but at the Figure 12-2 we can only see the <header class="banner">. I may assume the sentence was written before the HTML5 tags such as <header>, <footer> etc. were introduced, so one day it was <div class="banner"> instead, but later the Figure was edited but the sentence left untouched.

Boris  Apr 03, 2017 
Printed Page 390
3rd line from the top

"The <div> tag for a page's banner area might look like this: <div class="banner">" - At Figure 12-2 the banner uses <header> tag instead. Read my errata for page 388 for more information.

Boris  Apr 03, 2017 
Printed Page 418
Step 5.

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

Boris  Apr 09, 2017 
Printed Page 434
2nd paragraph

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.

Boris  Apr 11, 2017 
Printed Page 441
section 2

.hat figcaption {
....
bottom: 0

However, it needs to be be

...
bottom: 0;

Zeljko Porobija  Dec 01, 2015 
Printed Page 443
section 3

.hat figcaption b
....
bottom: 0

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

Zeljko Porobija  Dec 01, 2015 
Printed Page 443
section 4

.hat:hover figcaption {
display: block;
}

However, it doesn't work. Unlike the method in tha paragraph later (bottom of the page), which works smoothly. See to it, please.

Zeljko Porobija  Dec 01, 2015 
Printed Page 443
Figure 14-7 (right)

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;

Boris  Apr 11, 2017 
Printed Page 454
first paragraph (step #5)

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

Anonymous  May 20, 2016 
Printed, PDF Page 467
1st paragraph after the code.

"For example, if you save the this file as, you'd add this HTML to the <head> of a web page:" - "the this" is a typo.

Boris  Apr 23, 2017 
Printed Page 480
Caption for Figure 15-5

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.

Boris  Apr 19, 2017 
Printed Page 485
Caption for Figure 15-7

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.

Boris  Apr 19, 2017 
Printed Page 496
The code

...
<!-- 12 unit wide column -->
<div class="one columns">
<!-- article text here -->
</div>
...

If we want column to be a single column that takes whole width, it should be <div class="twelve columns">

Boris  Apr 20, 2017 
Printed Page 499
2nd sentence

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

Azeez Otori  Aug 05, 2016 
Printed Page 501
Last paragraph

"You must add two class namess and the names must be separated from each other by a space." - typo in word "names"

Boris  Apr 20, 2017 
Printed Page 501
Figure 16-3

Figure doesn't illustrate the 12-unit wide column, while the skeleton has this class and the paragraph above the figure says that "You can create columns of different widths ranging from a single unit to 12". I think it would be nice to add 12-unit wide column as the last column to the figure.

Boris  Apr 20, 2017 
Printed Page 508
1st paragraph, 2. sub-paragraph

It goes like this:
/*applies to all widths 100px and greater */

However, it shoud read:
/*applies to all widths 1000px and greater*/

Zeljko Porobija  Dec 04, 2015 
PDF Page 510

point 6: 9-unit-wide div so the HTML looks like this (additions in bold
should be
8-unit-wide div so the HTML looks like this (additions in bold):

Dan deJong  Sep 13, 2016 
Printed Page 512
Last paragraph at step 10.

"... it's just a class name you can use can style this section of the page." - I'm not sure if it's clear? Maybe it have to be replaced with "you can use to style..."?

Boris  Apr 20, 2017 
Printed Page 516
Code at step 6.

If you take a look at Figures 16-9, 16-11, 16-12 and 16-13 you may notice a padding / margin between the top section and the info section, but there is no code provided for that. I think the right place for that might be the .header class, so the code should look like this:

./* Mobile first queries */
/* applies to ALL widths */
.header {
padding: 50px 0 70px 0;
background-image: url(../imgs/header.jpg);
background-size: cover;
margin-bottom: 20px;
}

Boris  Apr 21, 2017 
PDF Page 522
middle of the page: 1. Open the custom.css

(additions in bold):
Actually the original code is in bold, but the additions are in plain text.

Dan deJong  Sep 13, 2016 
Printed Page 522
Step 1.

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

Boris  Apr 21, 2017 
Printed Page 525
Finished design.

The finished design provided in the 16_finished folder greatly differs from what the book says, it has different footer, it's missing important properties for .logo at the 550px breakpoint, it uses different properties / class names which were not presented in the tutorial as well.

Boris  Apr 21, 2017 
Printed Page 536
1st Bullet Point

The sentence which says:

"Confusingly, if you choose the row-reverse direction, the flex-start option aligns all items to the left."

should instead say:

"Confusingly, if you choose the row-reverse direction, the flex-start option aligns all items to the right."

Jason Killian  Sep 16, 2015 
Printed Page 540
The code

The sentence before the code says "For example to get the layout pictured in #5 in Figure 17-6, you could use CSS code like this:" If we take a look in #5 in Figure 17-6 we will see that the space not only distributed between the rows, but also added to the top and bottom, which means that it's align-content: space-around; property, but the code below uses space-between which is #4 in Figure.

Boris  Apr 21, 2017 
Printed Page 541
The code

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

Boris  Apr 21, 2017 
Printed Page 542
The code

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

Boris  Apr 21, 2017 
Printed Page 559
3rd paragraph; 1st paragraph under "Adding Three Columns"

"Remember that in step 1 on page 559, . . ."

Should be, "Remember that in step 2 on page 557, . . ."

Michael Walker  Oct 21, 2016 
Printed Page 564
Step 2.

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

Boris  Apr 23, 2017 
Printed Page 565
Description for the Figure 17-21.

"The CSS flexbox display mode lets you create designs that "flex," or change..." - the comma after the word "flex" is a typo.

Boris  Apr 23, 2017 
Printed Page 586
Last paragraph

"This selector formats the .homeLink only when it's inside another tag with the ID #home." - should be replaced with "This selector formats the .homeLink only when it's inside another tag with the class .home."

Boris  Apr 24, 2017 
Printed Page 588
Power Users' Clinic: Paragraph 3, 2nd sentence

"In other words, you'd apply class names throughout your HTML and then use CSS to format then."

Last word "then," should be "them."

Michael Walker  Oct 21, 2016 
Printed Page 597
Last paragraph

"See step 5 on page 598 for a reminder on how to do this for Windows users, or step 1 on page 598 for Mac users." uses wrong pages for reference, and should be replaced with this: "See step 5 on page 593 for a reminder on how to do this for Windows users, or step 1 on page 594 for Mac users."

Boris  Apr 24, 2017 
Printed Page 603
4th paragraph

There is a space before the colon in the code: "$logo_color : #083B91;"

Should be: "$logo_color: #083B91;"

Michael Walker  Oct 24, 2016 
Printed Page 617
Compiled code

"The Sass command will compile that code into this:

.btn, .btn-order, .btn-delete, .btn-cancel {" - it won't compile the code into this, because %btn is a placeholder, and won't appear in the compiled CSS file. The correct code is:

".btn-order, .btn-delete, .btn-cancel {"

Boris  Apr 25, 2017 
Printed Page 624
Second code.

"h1 {
@include text(1.25em, 1.2, bold, #FF0000);
}

The resulting CSS that Sass creates would look like this:

h1 {
font-size: 2em;
line-height: 1.2;
font-weight: bold;
color: #FF000;
}"

The values for the font-size and color in the compiled version are incorrect. Should be:

"h1 {
font-size: 1.25em;
line-height: 1.2;
font-weight: bold;
color: #FF0000;
}"

Boris  Apr 25, 2017 
Printed Page 628
Last line

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

Boris  Apr 25, 2017 
Printed Page 633
The Note

"For creating a compressed, production-ready CSS file see the Tip on page 600." - The tip is on page 599.

Boris  Apr 25, 2017 
Printed Page 647
list-style-position example

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

Boris  Apr 26, 2017 
Printed Page 670
"content" section

"Use this property with the :after or :before pseudo-elements." - pseudo-elements uses double colon in CSS3, so the sentence should be "Use this property with the ::after or ::before pseudo-elements.", and the code below also need to be fixed:

"p.advert::before { content: "And now a word from our sponsor..."; }
a::after { content: " (" attr(href) ") "; }"

Boris  Apr 27, 2017