[css-variables] Add some examples to the API section.

Author: tabatkins

css-variables/Overview.html

@@ -828,6 +828,36 @@ <h3 id=the-cssvariablesdeclaration-interface><span class=secno>4.2. </span>
    <var>varName</var> as its argument, and return the returned value.
    Otherwise, do nothing and return the empty string.
 
+  <div class=example> For example, given the following style sheet:
+   <pre>div {
+  var-foo: 16px;
+  var-Bar: red;
+  var-foo-bar: 50%;
+}
+</pre>
+
+   <p> The following lines of script all return something useful:
+
+   <pre>el = document.querySelector("div");
+print(el.style.var.foo);        /* Prints the value of "var-foo" */
+print(el.style.var.Bar);        /* Prints the value of "var-Bar" */
+print(el.style.var["foo-bar"]); /* Prints the value of "var-foo-bar" */
+</pre>
+
+   <p> On the other hand, the following do not:
+
+   <pre>print(el.style.varFoo); 
+/* Custom properties don’t exist directly on "style" */
+
+print(el.style.varfoo); 
+/* Not even if the casing matches. */
+
+print(el.style.var.foo-bar); 
+/* Retrieves "var-foo" and subtracts a JS variable named "bar",
+   rather than retrieving the value of "var-foo-bar" */
+</pre>
+  </div>
+
   <h2 id=acknowledgments><span class=secno>5. </span> Acknowledgments</h2>
 
   <h2 id=conformance><span class=secno>6. </span> Conformance</h2>
@@ -946,7 +976,7 @@ <h3 id=testing><span class=secno>6.5. </span> Non-experimental
    W3C are subject to review and correction by the CSS Working Group.
 
   <p>Further information on submitting testcases and implementation reports
-   can be found from on the CSS Working Group’s website at <a
+   can be found from on the CSS Working Group's website at <a
    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>

css-variables/Overview.src.html

@@ -608,6 +608,42 @@ <h3 id='the-cssvariablesdeclaration-interface'>
 	and return the returned value.
 	Otherwise, do nothing and return the empty string.
 
+	<div class='example'>
+		For example,
+		given the following style sheet:
+
+		<pre>
+		div {
+			var-foo: 16px;
+			var-Bar: red;
+			var-foo-bar: 50%;
+		}
+		</pre>
+
+		The following lines of script all return something useful:
+
+		<pre>
+		el = document.querySelector("div");
+		print(el.style.var.foo);        /* Prints the value of "var-foo" */
+		print(el.style.var.Bar);        /* Prints the value of "var-Bar" */
+		print(el.style.var["foo-bar"]); /* Prints the value of "var-foo-bar" */
+		</pre>
+
+		On the other hand, the following do not:
+
+		<pre>
+		print(el.style.varFoo); 
+		/* Custom properties don't exist directly on "style" */
+
+		print(el.style.varfoo); 
+		/* Not even if the casing matches. */
+
+		print(el.style.var.foo-bar); 
+		/* Retrieves "var-foo" and subtracts a JS variable named "bar",
+		   rather than retrieving the value of "var-foo-bar" */
+		</pre>
+	</div>
+
 
 <h2>
 Acknowledgments</h2>