[css-variables] Add an example of valid variable fallback right in the beginning.

Author: tabatkins

css-variables/Overview.html

@@ -573,6 +573,34 @@ <h2 id=using-variables><span class=secno>3. </span> Using Cascading
    class=css>var()</code>’ function will mean that the containing
    declaration is invalid at computed-value time.
 
+  <div class=example> The fallback value allows for some types of defensive
+   coding. For example, an author may create a component intended to be
+   included in a larger application, and use variables to style it so that
+   it's easy for the author of the larger application to theme the component
+   to match the rest of the app.
+   <p> Without fallback, the app author must supply a value for every
+    variable that your component uses. With fallback, the component author
+    can supply defaults, so the app author only needs to supply values for
+    the variables they wish to override.
+
+   <pre class=example>/* In the component's style: */
+.component .header { 
+  color: var(header-color, blue); 
+}
+.component .text { 
+  color: var(text-color, black); 
+}
+
+/* In the larger application's style: */
+.component {
+  var-text-color: #080;
+  /* header-color isn't set, 
+     and so remains blue, 
+     the fallback value */
+}
+</pre>
+  </div>
+
   <div class=example> For example, the following code incorrectly attempts to
    use a variable as a property name:
    <pre>.foo {

css-variables/Overview.src.html

@@ -348,6 +348,39 @@ <h2 id='using-variables'>
 	Otherwise, the result of evaluating the ''var()'' function will mean 
 	that the containing declaration is invalid at computed-value time.
 
+	<div class='example'>
+		The fallback value allows for some types of defensive coding.
+		For example,
+		an author may create a component
+		intended to be included in a larger application,
+		and use variables to style it
+		so that it's easy for the author of the larger application
+		to theme the component to match the rest of the app.
+
+		Without fallback,
+		the app author must supply a value for every variable that your component uses.
+		With fallback, the component author can supply defaults,
+		so the app author only needs to supply values for the variables they wish to override.
+
+		<pre class='example'>
+		/* In the component's style: */
+		.component .header { 
+			color: var(header-color, blue); 
+		}
+		.component .text { 
+			color: var(text-color, black); 
+		}
+
+		/* In the larger application's style: */
+		.component {
+			var-text-color: #080;
+			/* header-color isn't set, 
+			   and so remains blue, 
+			   the fallback value */
+		}
+		</pre>
+	</div>
+
 	<div class='example'>
 		For example, the following code incorrectly attempts to use a variable as a property name: