Errata for CSS3: The Missing Manual

"roots" should be "root".

'that a moves away' should be 'that moves away'

"have already incorporated parts the newer models" should read "have already incorporated parts OF the newer models".

Note from the Author or Editor:
change "parts the newer modules" to "parts of the newer modules"

The link reference: www.w3schools.com/html5/html5_intro.asp is incorrect. It should read: www.w3schools.com/html/html5_intro.asp

The word The is there twice in the Mark Twain quote.

Says: "Press Enter again add add three additional properties." The example doesn't add three more properties (which would lead to a total of four). It adds two more (leading to a total of three).

Note from the Author or Editor:
step6 should read "Press Enter again and add two additional properties, like so:"

Says: "The first two assign a size and font to the text, while the third removes space from around the headline." No, the first is color.

Note from the Author or Editor:
Second paragraph after the code in step 6 should read "The first assigns a size to the text, while the second removes space from around the headline."

In book is: margin-left: 80px; In code samples is: margin-left: 60px; For consistency it should be: margin-left: 60px; On page 53 referenced value for paragraph styling is 60 pixels: "For example, you might change its color, and indent it 60 pixels to match the indent of the <p> tags."

Note from the Author or Editor:
in code on page 47 change margin-left: 80px; to margin-left: 60px;

Says that we can see a completed version in internal.html. That file contains an h1 property (font-weight: normal;) that was never discussed in the text.

Note from the Author or Editor:
files updated on the server

In the step 6 example, the closing brace and closing style tag should be bold.

The another_page file didn't contain any link tags. We added two link tags. The example shows only the second link tag in bold. Both should be bold.

Note from the Author or Editor:
step 14, code: the two <link> tags should be bold

This box erroneously refers to “ID selectors.” The text in this box is about the ID attribute in HTML, not the ID selector in CSS. A selector is part of the CSS language. And, as this box indicates, “You don’t actually need to create any CSS for this --- it works purely with HTML.” Likewise, the penultimate sentence on page 60 incorrectly uses “ID selectors.”

Note from the Author or Editor:
change first sentence of box to ID attributes in HTML have a few powers that class attributes lack.

Says “creating class or ID styles also require…” Should be “requires.”

Says: “a HTML tag…” Should be “an HTML tag…”

SMALL TYPO Step #20 "Creating an External Style Sheet" in Chapter 2 says figure 2-4 shows another_page.html. I believe Figure 2-4 actually shows basic.html.

Note from the Author or Editor:
In step 20, "Figure 2-4 shows the completed another_page.html file." should be "Figure 2-4 shows the completed basic.html file."

"Fortunately, to maintain support with older sites, browser will continue to support..." Should probably be "browsers."

After saying that one cannot do much with ::selection, the text thanks CSS for making sure that we "can go wild". In the context, this should probably be "can't go wild".

Note from the Author or Editor:
change "you can go wild" to "you can't go wild"

Reads as : there's only on <h1> tag... Should be there's only one <h1> tag

"First" and "second" are reversed for the selectors provided: "To select only the second <h2> tag, your child selector looks like this: body > h2. If you want the first <h2> tag, then you must use this child selector instead: div > h2." "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."

In all examples of the colon-using child pseudo-classes (except the one in question), there is no space before the colon. Therefore, for consistency, the first line on page 76 should be changed from “h1 :first-child” to “h1:first-child”.

Note from the Author or Editor:
remove space between h1 and :first-child should be h1:first-child

Reads as ...For example, you can use apply a class to a paragraph... Should be : For example, you can apply a class to a paragraph OR For example, you can use a class with a paragraph

Note from the Author or Editor:
change "you can use apply a class" to "you can use it to apply a class"

"selects a <p> tag that immediately follows a <h2> tag" should probably be "an <h2> tag."

Note from the Author or Editor:
First paragraph, third sentence Change "follows a <h2> tag" to "follows an <h2> tag" change "a" to "an"

Says: "you saw this trick in the previous tutorial on page 89" Should be page 90.

Says "See page 70 for the deal on these pseudo-things." Should be page 68.

In the "Troubleshooting Moment" box, paragraph #3, "...that *specific* property always wins." The use of the word "specific" in this context where *specificity* actually has a larger connotation, is perhaps best avoided. The fact I am submitting such a nit is testament to the fact that this is a truly awesome book! Thanks!

Note from the Author or Editor:
In the sidebar, 2nd column, 1st paragraph, please change "that specific property always wins" to "that property always wins."

Is: <div id="article"> Should be: <div class="article"> In the sentence above this code: "you simply replace all IDs with classes"

"You decide that you want to colors the paragraphs" Should read: "You decide that you want to color the paragraphs"

Note from the Author or Editor:
"you want to colors" should be "you want to color"

Says: "As mentioned on page 112, many web designers these days avoid ID selectors." Page 112 doesn't say that. It says to avoid super-long selectors, not ID selectors. Also doesn't say anything about web designers. Should be page 61 instead.

Note from the Author or Editor:
page 114, first sentence in main section change page reference from "page 112" to "page 61"

Step 5 is the first time in the Overcoming Conflicts section that you've told the reader to preview the page in a web browser. And the claim is that "the paragraph is completely unchanged." Not so. If the reader doesn't preview until step 5 (per the instructions), then the addition of .main p in step 2 will cause a visible difference in that paragraph in step 5, since that's the first time the file has been viewed in a browser since step 2. So the reader should be told to preview the file immediately after adding .main p.

Note from the Author or Editor:
page 121 last paragraph on page should begin like this "Preview the page in a web browser and you'll see that this new style changes the color, size and font of the text..." (rest of text is the same)

Incorrect web font format identifier (same mistake is made twice) and missing article. As it reads now: "WOOF is generally preferred since it's a smaller file that downloads more quickly, while SVG is generally much larger file, so you want to make sure that you list the fonts in the order of .eot, .woof, .ttf, and .svg." Should read: "WOFF is generally preferred since it's a smaller file that downloads more quickly, while SVG is generally a much larger file, so you want to make sure that you list the fonts in the order of .eot, .woff, .ttf, and .svg."

Says: “preinstalled fonts discussed on page 127.” Do you mean 129?

Note from the Author or Editor:
reference to page 127 should be page 129

Says: “while the font-style property (page 141)” It’s unnecessary to provide a cross-reference to the page we’re on.

Note from the Author or Editor:
cross reference to page 140 should be page 163 and reference to page 141 should be page 162

Says: “since it’s requires.” Should be “it.”

Says: “you’ll find a easy-to-use.” Should be “an.”

Incorrect tag specified - should be <ul> not <li>. Reads now: Create a style that applies to the list - like a class style you apply to the <ol> or <li> tags... At this point, everything in the list - text included - is red and bold. Should read: Create a style that applies to the list - like a class style you apply to the <ol> or <ul> tags... At this point, everything in the list - text included - is red and bold.

Says “You’ll learn about generated content on page 595.” Actually, we already learned about it back on pages 70-71.

Note from the Author or Editor:
change "You'll learn about generated content on page 595" to "You read about generated content on pages 70-71"

"Click at the end of the closing brace of the body tag selector..." At this point only HTML tag selector has been used in the tutorial

Note from the Author or Editor:
page 182, step 1 change "brace of the body tag selector" to "brace of the HTML tag selector"

Says: “adding the coded in bold.” Should be “code.”

Note from the Author or Editor:
step 3 change "adding the coded" to "adding the code"

Says “you’ll read on page 184 in the next chapter.” We’re on 184.

Note from the Author or Editor:
Step 7 last sentence of second paragraph, reference to page 184 should be page 196

..main should be .main

Note from the Author or Editor:
first line of code for step 3 should be .main .byline strong (remove extra period in ..main)

The world "manufactures" should be changed to "manufacturers".

Note from the Author or Editor:
2nd paragraph of up to speed box, first sentence should end in "browser manufacturers move cautiously."

"... just stick with one color model (RBG) ..." Should be "... just stick with one color model (RGB) ..."

Note from the Author or Editor:
last line of note "RBG" should be "RGB"

Says “after completing Step 3 above.” Should be Step 4. The point is to see the color in the body tag without the color in the html tag. This can be done only after the color is added to the body in Step 4.

Note from the Author or Editor:
second to last sentence in tip on page 226 should say "after complete Step 4 above"

Line: " box-shadow: 0 0 15px 5px rgba(44,82,100,.75); " should be in bold. Other lines were added earlier.

Note from the Author or Editor:
Make line 4 of the code bold: box-shadow: 0 0 15px 5px rgba(44,82,100,.75); ALL OTHER LINES ARE NOT BOLD

First, there is an unnecessary blank line in the code. Second, the color value unnecessarily switches from RGB to hex (compared to Step 1).

Note from the Author or Editor:
Pages 230-231 code insteps 2, 3 and 4: the color property (line 7 in each code example) should read: color: rgb(133,161,16);

Only "padding: 5px 15px 2px 15px;" should be in bold

Note from the Author or Editor:
step 3 code only last line of code should be bold

Only the margin declaration should be bold.

Note from the Author or Editor:
only last line of code in step 4 should be bolded

Mentions a green border twice. Per page 226, it’s dark gray, not green.

Note from the Author or Editor:
"the green border surrounding the body" should be "the grey border surrounding the body" AND "if it touched the green border" should be "if it touched the grey border"

Says: “the visual differences are accomplished by using different background images.” Well, SOME of the differences are due to different background images. There are a lot of other styles employed, though, like different font styles, different margins, etc. I’d change it to “the main visual differences” or equivalent.

Note from the Author or Editor:
second to last sentence of second-to last paragraph on page 240 should read The HTML for both the pages shown in Figure 8-1 is exactly the same; the most striking visual differences are accomplished by using different background images.

"However, you can use negative values to move an image off the right edge or above the top edge, hiding that portion of the image from view." I believe it should be: "...you can use negative values to move an image off the left edge or above the top edge, hiding..."

Note from the Author or Editor:
change "off the right edge" to "off the left edge"

All references in subject paragraph plus the three bulleted items below it refer to Figure 8-9. They should refer to figure 8-10 on page 253 instead.

background-size: 100px auto; In this case, the background image is 100 pixels wide, and the browser automatically sets the width to keep the aspect ratio of the image intact (so it isn’t distorted). Instead of a browser automatically sets the width to........ it must be a browser automatically sets the height to....... As width value already specified as 100px.

Note from the Author or Editor:
last paragraph, first sentence of apge 253 change "the browser automatically sets the width" to "the browser automatically sets the height"

The reference to Figure 8-10 is incorrect. It should be figure 8-11.

"which requires the usually semicolon necessary"? This looks like it should be "usual".

Note from the Author or Editor:
change "the usually semicolon" to "the usual semicolon"

The "background-image" code ends with two semicolons instead of one.

Note from the Author or Editor:
first line of code on page (just above NOTE) should read: background-image: linear-gradient(left,black,white); (there should be only 1 semicolon at the end of the line)

Figure 8-14 should have value 0deg (360deg) at left side of square instead of 315deg.

discussed on page 260 should be discussed on page 265

Second paragraph reads ...you can use and valid CSS color values... It should read ... you can use any valid CSS color values...

"Open the file styles.css in the image_ex folder ..." Should be "Open the file styles.css in the 01_image_ex folder ..."

Says: “02-->gallery_ex.” Should be “02_gallery_ex.”

Note from the Author or Editor:
in step 1, replace second arrow (between 02 and gallery_ex) with underscore: 02_gallery_ex

The img tag should not have a space between the slash and “images”.

Note from the Author or Editor:
2nd line of code in step 1: no space between / and images. should be <img src="../images/dandelion.jpg ...

Says: “you’ll wrap this tutorial up in two steps.” Should be “three steps.”

“gallery_ex” should be “02_gallery_ex.”

Note from the Author or Editor:
last sentence on page 281 should read You can find a completed version of this tutorial in the 08_finished-->02_gallery_ex folder.

“bg_ex” should be “03_bg_ex.”

Note from the Author or Editor:
step one change bg_ex to 03_bg_ex

Says “Figure 8-23, top.” Should be “left,” not “top.”

Says “bottom image of Figure 8-23.” Should be “right,” not “bottom.”

Says “basic a tag styles.” Should be “basic <a> tag styles.”

Incorrect page number referenced. Is: "as explained in the box on page 296. Should be: "as explained in the box on page 294.

Says: “Start by removing the link entirely (2, 3, 4).” First, the link isn’t being removed; it’s the line. Second, the fourth image is not an example of an entirely removed underline. Or, at least, it wasn’t included in the “Remove the underline entirely” section on page 297.

Note from the Author or Editor:
Figure 9-1 second sentence should read: "Start by removing the underline entirely (2,3) and replacing it only when the visitor mouses over the link (4).

Pages 301-302 - second sample button code: The problem with the code as shown in the printed version is that each line of code is numbered even though some of the code lines are actually continuation of code lines that have wrapped on the page. The following shows the code with each code line given its own line number. This then corresponds correctly with the explanation text written in the book. 1. background-color: #ee432e; 2. background-image: -webkit-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 3. background-image: -moz-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 4. background-image: -o-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 5. background-image: linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 6. border: 1px solid #951100; 7. border-radius: 5px; 8. box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; 9. padding: 12px 20px 14px 20px; 10. text-decoration: none; 11. color: #fff; 12. font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; 13. text-align: center; 14. text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);

Top of page, first pgh. after code: "The CSS varies a bit depending on whether you want a horizontal of vertical navigation bar." Should be "OR vertical navigation bar."

Reads: "in this chapter's tutorial on page 310" Should be: "in this chapter's tutorial beginning on page 324"

If we read this page top to bottom, then we’ve already started reading the “Horizontal Navigation Bars” section by the time we get to this box. So it’s confusing that the beginning of the box text assumes, without saying so, that it’s talking about a vertical bar. I suggest starting off the box by clarifying that you’re talking about vertical bars first.

Note from the Author or Editor:
change the first sentence of the sidebar box to: In a vertical navigation bar, if the buttons touch, you'll see a double border between two buttons.

Says: “The first---using the display:inline-block property…” The first method described in Step 2 on page 308 is inline, not inline-block.

Note from the Author or Editor:
change "using the display: inline-block property" to "using the display: inline property"

Last sentence reads "See the note on page 303 for the reason for this and one possible workaround." The reference should be to page 310, not page 303.

Note from the Author or Editor:
Change last sentence in Figure 9-6 beginning with "See the note on page 303…" Change to: "The reason for this gap is described at the bottom of page 309." There is no Note that explains this -- it's actually described in the text at the bottom of page 309

Says: “It will apply to all <a> tag…” Should be “tags.”

Note from the Author or Editor:
Setp3, second sentence of paragraph following the step change "It will apply to all <a> tag..." to "It will apply to all <a> tags.."

The figure reference is incorrect: It currently reads: "and style (Figure 9-11, left)". It should read: "and style (Figure 9-10, left)".

Note from the Author or Editor:
Change "(Figure 9-11, left)" to "(Figure 9-10)."

mailto,: should be mailto:

Inconsistent usage of values in Step 6, Pg 333 in .mainNav. The border-left property is not consistent with the entry made earlier in Step 10 on page 327. The original value entered was: border-bottom: 1px dashed #999; The values used in the entry on page 333 was: border-left: 1px dashed #999999; The color values result in the same color being displayed, but one used the full value while the other uses the shorthand value.

Note from the Author or Editor:
step 6, page 333, 5th line of code, change border-left: 1px dashed #999999; to border-left: 1px dashed #999;

The finished nav_bar_horizontal.html file has the misspelling “experLink.”

Note from the Author or Editor:
Step 7, line 3 of code, change "experLink" to "expertLink"

Hello, p.349: the name of Matthew Lein and of its Ceaser tool are misspelled: "Mathew Lein's Ceasar tool is one..." should read "Matthew Lein's Ceaser tool is one...". p.350: the name of the tool is misspelled: "The online Caesar tool..." should read "The online Ceaser tool...".

Note from the Author or Editor:
page 349 second to last sentence should read "Matthew Lein's Ceaser too..." Also in figure text for Fiture 10-8, Caesar should be Ceaser.

URL at end of last pgh. needs updating. Should probably be: http://www.creativebloq.com/css3/get-more-out-your-css-transitions-jquery-3126395

Note from the Author or Editor:
Update URL at the end of the Box to: http://www.creativebloq.com/css3/get-more-out-your-css-transitions-jquery-3126395

The first paragraph on page 353 says "Writing out all the different properties..." and lists the properties. But it duplicates the transition-duration property twice. The last property listed should be changed from transition-duration to transition-delay.

Note from the Author or Editor:
second line of first paragraph replace "transition-duration" with "transition-delay"

3rd paragraph states "By default, the timing function is ease-in and there's no delay". I believe the default timing function as stated on page 348 is ease.

Note from the Author or Editor:
text should say: "By default, the timing function is ease and there's no delay" replace ease-in with ease

"The buttons on the page are contained inside a HTML 5 nav element." Should probably be "inside AN HTML5... ."

"a bottom's hover state" should read "a button's hover state"

"and create descendent selector like .stocks td or stocks th to uniquely format individual cells." should be "and create descendent selector like .stocks td or .stocks th to uniquely format individual cells." That is, the class dot is missing from before the second "stocks".

Note from the Author or Editor:
change stocks th to .stocks th (add period before "stocks th")

The sentence reads: "understand the how web browsers..." Should read: "understand how web browsers..."

tag with the ID of inventory should read tag with the class of inventory

The 2nd sentence reads: "This table has an class of inventory..." It should read: "This table has a class of inventory..."

In keeping with previous text conventions in this book, the last six items added to the style in Step 9 on pages 393 & 394 should be bolded.

"5. Repeat Step 5 ..." Should be "5. Repeat Step 4 ..."

You can only use an ID should read You can also use an ID

The sentence ends with "... (see Figure 13-16 for an example)." Figure 13-16 does not show the type of problem described here. Figure 13-12 does instead.

Note from the Author or Editor:
change "see Figure 13-16" to "see FIgure 13-12"

is: In Figure 13-9 should be: In Figure 13-8

Second sentence: "It lets you divide a single element ... into a three, four, or more columns." Should be "into three, four or more."

Note from the Author or Editor:
remove the "a" in "into a three, four, or more columns."

To keep the respective order, top, right, left, and bottom padding would read top, right, bottom, and left padding

Book shows 2 curly braces after -moz-box-sizing style - There should only be one closing curly brace

Note from the Author or Editor:
last line of code for step 2 on page 447 should have only one } not two

On http://oreilly.com/missingmanuals/cds/css3tmm3/, the link for http://css-tricks.com/convert-menu-to-dropdown/ from ch. 14 is missing the hyphen at the start (css-tricks) and so doesn't take you to the right page. Also, can't someone spice up the CSS a bit for the link listing page? Larger chapter titles & extra margin before them to make them stand out, reduce the spacing between the bullet points, etc.? The whole page just kind of blends together, and not in a good way. This is related to a book on how to do great CSS, so it's surprising that this page doesn't look better.

Note from the Author or Editor:
This is a problem on this web page (not in the book itself) http://oreilly.com/missingmanuals/cds/css3tmm3/

Steps 8. and 9. mention ".sidebar" style but there is no such style in the styles.css. It may be .sidebar1

Note from the Author or Editor:
step 8 change "the .sidebar style" to "the .sidebar1 style" Same in step 9

The instructions for Step 2 say to add a style (in bold). None of the three lines of added styling data is actually bolded in the book.

Note from the Author or Editor:
code in step 2, the following code should be BOLD .sidebar2 { float: none; width: auto; }

Reference to "Step 8 on page 486" should be "Step 8 on page 476".

The text reads: nav li { display: inline-block; float: none; } To be consistent with the instructions in step 6 on page 485, it should read: nav li { float: none; display: inline-block; }

Step 5. mentions a file "global.css" but there is no such file in the tutorial folders. Should be "main.css".

`Code` should be `Coda`.

Kindle version: is: "the enclose ..." Should be: "then enclose ..."