[css-variables] Add an example of valid variable usage right in the beginning, per jdaggett's recommendation.

Author: tabatkins

css-variables/Overview.html

@@ -308,6 +308,27 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
    authors and users; CSS will never give them a meaning beyond what is
    presented here.
 
+  <div class=example> Custom properties define variables, which can be used
+   for many purposes. For example, a page that consistently uses a small set
+   of colors in its design can store the colors in custom properties and use
+   them with variables:
+   <pre>:root {
+  main-color: #06c;
+  accent-color: #006;
+}
+/* The rest of the CSS file */
+#foo h1 {
+  color: var(main-color);
+}
+</pre>
+
+   <p> The naming provides a mnemonic for the colors, prevents
+    difficult-to-spot typos in the color codes, and if the theme colors are
+    ever changed, focuses the change on one simple spot (the custom property
+    value) rather than requiring tons of edits across all stylesheets in the
+    project.
+  </div>
+
   <p> Unlike other CSS properties, custom properties are
    <strong>case-sensitive</strong>. The "var-" prefix <strong>must</strong>
    be written in lower-case.

css-variables/Overview.src.html

@@ -78,6 +78,32 @@ <h2 id='defining-variables'>
 	<i>Custom properties</i> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
 
+	<div class='example'>
+		Custom properties define variables,
+		which can be used for many purposes.
+		For example, a page that consistently uses a small set of colors in its design
+		can store the colors in custom properties
+		and use them with variables:
+
+		<pre>
+		:root {
+			main-color: #06c;
+			accent-color: #006;
+		}
+		/* The rest of the CSS file */
+		#foo h1 {
+			color: var(main-color);
+		}
+		</pre>
+
+		The naming provides a mnemonic for the colors,
+		prevents difficult-to-spot typos in the color codes,
+		and if the theme colors are ever changed,
+		focuses the change on one simple spot
+		(the custom property value)
+		rather than requiring tons of edits across all stylesheets in the project.
+	</div>
+
 	Unlike other CSS properties,
 	custom properties are <strong>case-sensitive</strong>.
 	The "var-" prefix <strong>must</strong> be written in lower-case.