Backfilled early chapters to the extent possible

meyerweb · c8c61f3a9cb2b47867128bd00d27e3c4a9ef8cb5 · meyerweb committed Jul 22, 2015 · Jul 22, 2015 · c8c61f3
1 parent 948c424
commit c8c61f3a9cb2b47867128bd00d27e3c4a9ef8cb5
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This repository contains the base files used to create the figures for _CSS: The
 
 ## Notes
 
-* Not every chapter is represented here, since I’m sharing writing duties with Estelle Weyl, and some of the early chapters’ figure files have gone missing.
+* Not every chapter is represented here, mostly because I’m sharing writing duties with Estelle Weyl and so only have the figures for the chapters I wrote.  Except for the Specificity and the Cascade chapter, whose figure files have gone missing. ¯\_(ツ)_/¯
 * Not every figure in the final book(s) is or will be represented here, as on rare occasions I find it easier to create figures via other means.
 * Not every figure will work in every browser.  I have made no effort to vendor-prefix or otherwise work around cross-browser limitations.
 * The file names are based on the figures’ captions, not the figure numbers shown in the book(s).  Trust me, it was easier this way.
diff --git a/css-and-documents/arrow1.png b/css-and-documents/arrow1.png
diff --git a/css-and-documents/arrow2.png b/css-and-documents/arrow2.png
diff --git a/css-and-documents/css4_0101.html b/css-and-documents/css4_0101.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>01-01</title>
+<style type="text/css" media="all">
+body {width: 42em;}
+</style>
+</head>
+<body>
+
+<h1>h1 (block)</h1>
+
+<p>
+This paragraph (p) element is a block-level element.  The strongly emphasized text <strong>is an inline element, and will line-wrap when necessary</strong>.  The content outside of inline elements is actually part of the block element.  The content inside inline elements <em>such as this one</em> belong to the inline element.
+</p>
+
+</body>
+</html>
diff --git a/css-and-documents/css4_0101.png b/css-and-documents/css4_0101.png
diff --git a/css-and-documents/css4_0102.html b/css-and-documents/css4_0102.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>01-02</title>
+<style type="text/css" media="all">
+body {width: 42em;}
+</style>
+</head>
+<body>
+
+<book>
+ <maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>
+ <subtitle>Third Edition</subtitle>
+ <author>Eric A. Meyer</author>
+ <publisher>O'Reilly and Associates</publisher>
+ <pubdate>November 2006</pubdate>
+ <isbn type="print">978-0-596-52733-4</isbn>
+</book>
+<book>
+ <maintitle>CSS Pocket Reference</maintitle>
+ <subtitle>Third Edition</subtitle>
+ <author>Eric A. Meyer</author>
+ <publisher>O'Reilly and Associates</publisher>
+ <pubdate>October 2007</pubdate>
+ <isbn type="print">978-0-596-51505-8</isbn>
+</book>
+
+</body>
+</html>
diff --git a/css-and-documents/css4_0102.png b/css-and-documents/css4_0102.png
diff --git a/css-and-documents/css4_0103.html b/css-and-documents/css4_0103.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>01-03</title>
+<style type="text/css" media="all">
+body {width: 25em;}
+book, maintitle, subtitle, author, isbn {display: block;}
+publisher, pubdate {display: inline;}
+maintitle {font: bold 1.4em/1 sans-serif; border-bottom: 1px solid gray; margin-top: 1.5em;}
+subtitle {font-size: 1.1em; margin: 0.25em 0 0.5em;}
+author {font-weight: bold;}
+pubdate {font-size: 90%;}
+pubdate:before {content: " (";}
+pubdate:after {content: ")";}
+isbn {font-style: italic;}
+</style>
+</head>
+<body>
+
+<book>
+ <maintitle>CSS: The Definitive Guide</maintitle>
+ <subtitle>Third Edition</subtitle>
+ <author>Eric A. Meyer</author>
+ <publisher>O'Reilly and Associates</publisher>
+ <pubdate>November 2006</pubdate>
+ <isbn type="print">978-0-596-52733-4</isbn>
+</book>
+<book>
+ <maintitle>CSS Pocket Reference</maintitle>
+ <subtitle>Third Edition</subtitle>
+ <author>Eric A. Meyer</author>
+ <publisher>O'Reilly and Associates</publisher>
+ <pubdate>October 2007</pubdate>
+ <isbn type="print">978-0-596-51505-8</isbn>
+</book>
+
+</body>
+</html>
diff --git a/css-and-documents/css4_0103.png b/css-and-documents/css4_0103.png
diff --git a/css-and-documents/css4_0104.html b/css-and-documents/css4_0104.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>01-04</title>
+<style type="text/css" media="all">
+body {width: 42em;}
+</style>
+<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
+<style type="text/css">
+@import url(sheet2.css);
+/* These are my styles! Yay! */
+</style>
+</head>
+<body>
+<h1>Waffles!</h1>
+<p style="color: gray;">The most wonderful of all breakfast foods is
+the waffle—a ridged and cratered slab of home-cooked, fluffy goodness
+that makes every child's heart soar with joy. And they're so easy to make!
+Just a simple waffle-maker and some batter, and you're ready for a morning
+of aromatic ecstasy!
+</p>
+</body>
+</html>
diff --git a/css-and-documents/css4_0104.png b/css-and-documents/css4_0104.png
diff --git a/css-and-documents/css4_0105.html b/css-and-documents/css4_0105.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>01-05</title>
+<style type="text/css" media="all">
+section[id] {position: absolute; padding: 0 1em 3.25em;
+	border: 2px solid; -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
+	font: 0.9em Courier New, monospace; white-space: pre;}
+
+#doc {top: 7em; left: 2.5em; width: 28em; line-height: 1.4;}
+#css1 {top: 3em; left: 40em; width: 31em;}
+#css2 {top: 22em; left: 40em; width: 25em;}
+
+section h1 {position: absolute; width: 100%; bottom: 0.15em; left: 0; margin: 0;
+	font: bold 2em "Proxima Sans", Helvetica, sans-serif; text-align: center;}
+
+section img {position: absolute;}
+#css1 img {bottom: -26px; left: -191px;
+	-moz-transform: rotate(-1deg);
+	-moz-transform-origin: 100% 100%;}
+#css2 img {top: -27px; left: -391px;
+	-moz-transform: rotate(1deg);
+	-moz-transform-origin: 100% 0;}
+
+</style>
+</head>
+<body>
+
+<section id="doc"><h1>index.html</h1>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Eric’s World of Waffles&lt;/title&gt;
+&lt;meta http-equiv="content-type"
+      content="text/html; charset=utf-8"&gt;
+<strong>&lt;link rel="stylesheet" type="text/css"
+      href="sheet1.css" media="all"&gt;</strong>
+&lt;style type="text/css"&gt;
+/* These are my styles! Yay! */
+<strong>@import url(sheet2.css);</strong>
+h1 {color: silver;}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;h1&gt;Waffles!&lt;/h1&gt;
+&lt;p style="color: gray;"&gt;The most wonderful of
+all breakfast foods is the waffle&mdash;a ridged and 
+cratered slab of home-cooked, fluffy goodness 
+that makes every child's heart soar with joy.  
+And they're so easy to make!  Just a simple 
+waffle-maker and some batter, and you're ready 
+for a morning of aromatic ecstasy!
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</section>
+
+<section id="css1"><h1>sheet1.css</h1>
+body {background: white; font: medium serif;}
+h1 {color: blue;}
+a:link {color: navy; text-decoration: underline;}
+p {margin-left: 5%; margin-right: 10%;}
+p:first-line {font-size: 120%; font-weight: bold;
+   color: black;}
+p.footnote {font-size: smaller;}
+blockquote {font-style: italic;}
+blockquote em {font-style: normal;}
+pre, code, tt {color: gray; font-family: monospace;}
+<img src="arrow1.png"></section>
+
+<section id="css2"><h1>sheet2.css</h1>
+h1 {
+	font-size: 1.8em;
+	border-bottom: 1px dotted silver;
+}
+h1:first-letter {
+	font-size: 125%;
+}
+<img src="arrow2.png"></section>
+
+</body>
+</html>
diff --git a/css-and-documents/css4_0105.png b/css-and-documents/css4_0105.png
diff --git a/css-and-documents/css4_0106.html b/css-and-documents/css4_0106.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>01-06</title>
+<style type="text/css" media="all">
+body {width: 42em;}
+</style>
+<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
+<style type="text/css">
+@import url(sheet2.css);
+h1 {color: silver;}
+/* These are my styles! Yay! */
+</style>
+</head>
+<body>
+<h1>Waffles!</h1>
+<p style="color: gray;">The most wonderful of all breakfast foods is
+the waffle—a ridged and cratered slab of home-cooked, fluffy goodness
+that makes every child's heart soar with joy. And they're so easy to make!
+Just a simple waffle-maker and some batter, and you're ready for a morning
+of aromatic ecstasy!
+</p>
+</body>
+</html>
diff --git a/css-and-documents/css4_0106.png b/css-and-documents/css4_0106.png
diff --git a/css-and-documents/css4_0107.png b/css-and-documents/css4_0107.png
diff --git a/css-and-documents/sheet1.css b/css-and-documents/sheet1.css
@@ -0,0 +1,10 @@
+body {background: white; font: medium serif;}
+h1 {color: blue;}
+a:link {color: navy; text-decoration: underline;}
+p {margin-left: 5%; margin-right: 10%;}
+p:first-line {font-size: 120%; font-weight: bold;
+   color: black;}
+p.footnote {font-size: smaller;}
+blockquote {font-style: italic;}
+blockquote em {font-style: normal;}
+pre, code, tt {color: gray; font-family: monospace;}
diff --git a/css-and-documents/sheet2.css b/css-and-documents/sheet2.css
@@ -0,0 +1,7 @@
+h1 {
+	font-size: 1.8em;
+	border-bottom: 1px dotted gray;
+}
+h1:first-letter {
+	font-size: 125%;
+}
diff --git a/fonts/ch0501.html b/fonts/ch0501.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-1</title><style type="text/css">body {font-family: serif;}h1, h2, h3, h4 {font-family: sans-serif;}code, pre, tt, kbd {font-family: monospace;}p.signature {font-family: cursive;}</style></head><body><h1>An Ordinary Document</h1><p>This is a mixture of elements such as you might find in a normal document.  There are headings, paragraphs, <code>code fragments</code>, and many other inline elements.  The fonts used for these various elements will depend on what the author has declared, and what the browser's default styles happen to be, and how the two interleave.</p><h2>A Section Title</h2><pre>Here we have some preformatted textjust for the heck of it.</pre><p>If you want to make changes to your startup script under DOS, you start by typing <kbd>edit autoexec.bat</kbd>.  Of course, if you're running DOS, you probably already know that.</p><p class="signature">—The Unknown Author</p></body></html>
diff --git a/fonts/ch0502.html b/fonts/ch0502.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-2</title><style type="text/css">h1 {font-family: Georgia;}</style></head><body><h1>A Level 1 Heading Element</h1></body></html>
diff --git a/fonts/ch0503.html b/fonts/ch0503.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-3</title><style type="text/css">p {font-family: sans-serif;}</style></head><body><!-- the next example is correct (uses single-quotes) --><p style="font-family: 'New Century Schoolbook',Times,serif;">This paragraph is supposed to use either 'New Century Schoolbook', Times, or an alternate serif font for its display.</p><!-- the next example is NOT correct (uses double-quotes) --><p style="font-family: " New Century Schoolbook",times,serif;">This paragraph is also supposed to use either 'New Century Schoolbook', Times, or an alternate serif font for its display, but the quotation marks got unbalanced.</p></body></html>
diff --git a/fonts/ch0504.html b/fonts/ch0504.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-4</title><style type="text/css">@font-face {   font-family: "SwitzeraADF";   /* descriptor */   src: url("f/SwitzeraADF-Regular.otf");}h1 {font-family: SwitzeraADF, Helvetica, sans-serif;}  /* property */</style></head><body><h1>A Level 1 Heading Element</h1><p>This is a paragraph, and as such uses the browser’s default font (because there are no other author styles being applied to this document).  This is usually, as it is here, a serif font of some variety.</p></body></html>
diff --git a/fonts/ch0505.html b/fonts/ch0505.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-5</title><style type="text/css">@font-face {   font-family: "SwitzeraADF";   src: url("f/SwitzeraADF-Regular.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: bold;   src: url("f/SwitzeraADF-Bold.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-style: italic;   src: url("f/SwitzeraADF-Italic.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: bold;   font-style: italic;   src: url("f/SwitzeraADF-BoldItalic.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: bold;   font-stretch: condensed;   src: url("f/SwitzeraADF-BoldCond.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-style: italic;   font-stretch: condensed;   src: url("f/SwitzeraADF-CondItalic.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: bold;   font-style: italic;   font-stretch: condensed;   src: url("f/SwitzeraADF-BoldCondItalic.otf") format("opentype");}p > * {font-family: SwitzeraADF, serif;}#p2 > * {font-stretch: condensed;}</style></head><body><p>This element contains serif text, unstretched <strong>bold</strong> and <em>italic</em> text in SwitzeraADF, and unstretched <strong><em>bold and italic</em></strong> text in SwitzeraADF.</p><p id="p2">This element contains serif text, condensed <strong>bold</strong> and <em>italic</em> text in SwitzeraADF, and condensed <strong><em>bold and italic</em></strong> text in SwitzeraADF.</p></body></html>
diff --git a/fonts/ch0506.html b/fonts/ch0506.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-6</title><style type="text/css">p.one {font-weight: bold;}</style></head><body><p class="one">Within this paragraph we find some <i>italicized text</i>, a bit of <u>underlined text</u>, and the occasional stretch of <a href="http://www.w3.org/">hyperlinked text</a> for our viewing pleasure.</p></body></html>
diff --git a/fonts/ch0507.html b/fonts/ch0507.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-7</title><style type="text/css">p {font-weight: normal;}p em {font-weight: bolder;}  /* results in 'bold' text */h1 {font-weight: bold;}h1 b {font-weight: bolder;}  /* if no bolder face exists, evaluates to '800' */div {font-weight: 100;} /* assume 'Light' face exists ; see explanation */div strong {font-weight: bolder;} /* results in 'normal' text */</style></head><body><p class="one">Within this paragraph we find some <em>emphasized text</em>.</p><h1>This H1 contains <b>bold text!</b></h1><div>Meanwhile, this DIV element has some <strong>strong text</strong> but it shouldn’t look much different, at least in terms of font weight.</div></body></html>
diff --git a/fonts/ch0508.html b/fonts/ch0508.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-8</title><style type="text/css">/*   assume only two faces for this example: 'Regular' and 'Bold'   */body {font-family: Times,serif;}p {font-weight: 100;}   /* looks the same as 'normal' text */p em {font-weight: 400;}   /* so does this, but its weight will be '400' */strong {font-weight: bolder;}   /* even bolder than its parent */strong b {font-weight: bolder;}   /*bolder still */</style></head><body><p>This paragraph contains elements of increasing weight: there is an<em>emphasized element which contains a <strong>strongly emphasizedelement, and that contains a <b>boldface element</b></strong></em>.</p></body></html>
diff --git a/fonts/ch0509.html b/fonts/ch0509.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-9</title><style type="text/css">/*   assume only two faces for this example: 'Regular' and 'Bold'   */p {font-weight: 100;}   /* looks the same as 'normal' text */p em {font-weight: 400;}   /* so does this, but its weight will be '400' */strong {font-weight: bolder;}   /* even bolder than its parent */strong b {font-weight: bolder;}   /*bolder still */</style></head><body><p>100 <em> 400 <strong> 700 <b> 800 </b></strong></em>.</p></body></html>
diff --git a/fonts/ch0510.html b/fonts/ch0510.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-10</title><style type="text/css">/*   assume only two faces for this example: 'Regular' and 'Bold'   */p {font-weight: 900;}   /* as bold as possible , which will look 'bold' */em {font-weight: 700;}   /* so does this, but its weight will be '700' */strong {font-weight: lighter;}   /* lighter than its parent */strong b {font-weight: lighter;}   /*lighter still */</style></head><body><p>900 <em> 700 <strong> 400 <b> 300 <strong> 200 </strong></b></strong></em>.</p><!-- ...or, to put it another way... <p>bold <em> bold <strong> regular <b> regular <strong> regular </strong></b></strong></em>.</p></body></html>
diff --git a/fonts/ch0511.html b/fonts/ch0511.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-11</title><style type="text/css">@font-face {   font-family: "SwitzeraADF";   font-weight: normal;   src: url("f/SwitzeraADF-Regular.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: bold;   src: url("f/SwitzeraADF-Bold.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: 300;   src: url("f/SwitzeraADF-Light.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: 500;   src: url("f/SwitzeraADF-DemiBold.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: 700;   src: url("f/SwitzeraADF-Bold.otf") format("opentype");}@font-face {   font-family: "SwitzeraADF";   font-weight: 900;   src: url("f/SwitzeraADF-ExtraBold.otf") format("opentype");}h1, h2, h3, h4 {font: 225% SwitzeraADF, serif;}h1 {font-weight: 900;}h2 {font-size: 180%; font-weight: 700;}h3 {font-size: 150%; font-weight: 500;}h4 {font-size: 125%; font-weight: 300;}</style></head><body><h1>A Level 1 Heading Element</h1><h2>A Level 2 Heading Element</h2><h3>A Level 3 Heading Element</h3><h4>A Level 4 Heading Element</h4></body></html>
diff --git a/fonts/ch0513.html b/fonts/ch0513.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-13</title><style type="text/css">p.one {font-size: xx-small}p.two {font-size: x-small;}p.three {font-size: small;}p.four {font-size: medium;}p.five {font-size: large;}p.six {font-size: x-large;}p.seven {font-size: xx-large;}</style></head><body><p class="one">This paragraph (class 'one') has a font size of 'xx-small'.</p><p class="two">This paragraph (class 'two') has a font size of 'x-small'.</p><p class="three">This paragraph (class 'three') has a font size of 'small'.</p><p class="four">This paragraph (class 'four') has a font size of 'medium'.</p><p class="five">This paragraph (class 'five') has a font size of 'large'.</p><p class="six">This paragraph (class 'six') has a font size of 'x-large'.</p><p class="seven">This paragraph (class 'seven') has a font size of 'xx-large'.</p></body></html>
diff --git a/fonts/ch0514.html b/fonts/ch0514.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-14</title><style type="text/css">body {font-size: medium}h1 {font-size: xx-large;}em {font-size: larger;}</style></head><body><h1>A Heading with <em>Emphasis</em> added</h1><p>This paragraph has some <em>emphasis</em> as well.</p><h1> xx-large <em> (larger) </em> xx-large </h1></body></html>
diff --git a/fonts/ch0515.html b/fonts/ch0515.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-15</title><style type="text/css">body {font-size: 15px;}p {font-size: 12px;}em {font-size: 120%;}strong {font-size: 135%;}small, .fnote {font-size: 70%;}</style></head><body><body><p>This paragraph contains both <em>emphasis</em> and <strong>strongemphasis</strong>, both of which are larger than their parent element.The <small>small text</small>, on the other hand, is smaller by a quarter.</p><p class="fnote">This is a 'footnote' and is smaller than regular text.</p><p> 12px <em> 14.4px </em> 12px <strong> 16.2px </strong> 12px <small> 9px </small> 12px </p><p class="fnote"> 10.5px </p></body></body></html>
diff --git a/fonts/ch0516.html b/fonts/ch0516.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure 5-16</title><style type="text/css">p {font-size: 12px;}em {font-size: 120%;}strong {font-size: 135%;}</style></head><body><p>This paragraph contains both<em>emphasis and <strong>strongemphasis</strong></em>, both of which are larger than the paragraph text. </p><p> 12px <em>14.4px <strong> 19.44px </strong></em> 12px  </p></body></html>