[css-color] Rearrange some sections.

Author: tabatkins

css-color/Overview.bs

@@ -92,7 +92,7 @@ Foreground Color: the 'color' property</h2>
 	</dl>
 
 <h2 id='color-type'>
-RGB Colors: the <<color>> type</h2>
+Representing Colors: the <<color>> type</h2>
 
 	CSS colors are represented by a triplet of values--
 	red, green, and blue--
@@ -135,20 +135,38 @@ RGB Colors: the <<color>> type</h2>
 	a color is <a>achromatic</a> if the sum of the whiteness and blackness is at least ''100%''.
 
 
-<h3 id='the-rgba-function'>
+
+<h3 id="notes">
+Notes On Using Colors</h3>
+
+	Although colors can add significant amounts of information to
+	document and make them more readable, please consider the
+	W3C Web Content Accessibility Guidelines [[WCAG20]] when including color in your documents.
+
+	<ul>
+		<li><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color"><em>1.4.1 Use of Color:</em> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element</a>
+	</ul>
+
+
+<h2 id='numeric-rgb'>
+RGB Colors</h2>
+
+	There are several methods of directly specifying a color in terms of its RGBA channels.
+
+<h3 id='rgb-functions'>
 The RGB functions: ''rgb()'' and ''rgba()''</h3>
 
 	The ''rgb()'' function defines an RGB color by specifying the red, green, and blue channels directly.
 	Its syntax is:
 
 	<pre class='prod'>
-	<dfn>rgb()</dfn> = rgb( <<component>>, <<component>>, <<component>> )
-	<dfn>rgba()</dfn> = rgba(<<component>>, <<component>>, <<component>>, <<alpha-value>> )
-	<dfn>&lt;component></dfn> = <<number>> | <<percentage>>
+	<dfn>rgb()</dfn> = rgb( <<rgb-component>>#{3} )
+	<dfn>rgba()</dfn> = rgba( <<rgb-component>>#{3} , <<alpha-value>> )
+	<dfn>&lt;rgb-component></dfn> = <<number>> | <<percentage>>
 	<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
 	</pre>
 
-	The three <<component>>s specify the red, green, and blue channels of the color, respectively.
+	The three <<rgb-component>>s specify the red, green, and blue channels of the color, respectively.
 	''0%'' represents the minimum value for that color channel in the sRGB gamut,
 	and ''100%'' represents the maximum value.
 	A <<number>> is equivalent to a <<percentage>>,
@@ -252,8 +270,8 @@ The RGB hexadecimal notations: ''#RRGGBB''</h3>
 
 
 
-<h3 id='named-colors'>
-Named Colors</h3>
+<h2 id='named-colors'>
+Named Colors</h2>
 
 	In addition to the various numeric syntaxes for <<color>>s,
 	CSS defines a large set of <dfn id="named-color" title="named color" export>named colors</dfn> that can be used instead,
@@ -581,17 +599,17 @@ Named Colors</h3>
 
 	Note: this list of colors and their definitions is identical to the list of <a href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">named colors defined by SVG 1.1</a>.
 
-<h4 id='transparent-color'>
-The ''transparent'' keyword</h4>
+<h3 id='transparent-color'>
+The ''transparent'' keyword</h3>
 
 	The keyword <dfn value for="<color>">transparent</dfn> specifies a transparent black color;
 	that is, a color with its red, green, and blue channels all set to the minimum value
 	and its alpha channel set to full transparency,
 	equivalent to ''rgba(0, 0, 0, 0)''.
 
 
-<h4 id='currentcolor-color'>
-The ''currentcolor'' keyword</h4>
+<h3 id='currentcolor-color'>
+The ''currentcolor'' keyword</h3>
 
 	The keyword <dfn value for="<color>">currentcolor</dfn> takes its value from the value of the 'color' property on the same element.
 	This happens at <strong>used-value time</strong>,
@@ -651,8 +669,8 @@ The ''currentcolor'' keyword</h4>
 	as CSS keywords are case-insensitive.
 
 
-<h4 id='simple-hues'>
-Simple Named Hues: the <<named-hue>> term</h4>
+<h3 id='simple-hues'>
+Simple Named Hues: the <<named-hue>> term</h3>
 
 	The ''hsl()'' and ''hwb()'' notations both start from a saturated hue,
 	and then modify it in various ways to achieve the exact color desired.
@@ -698,8 +716,8 @@ Simple Named Hues: the <<named-hue>> term</h4>
 	it's equivalent to specifying the first hue as a functional <<splash-hue>> with the argument ''50%''.
 	That is, ''green blue'' specifies the same color as ''greenish(50%) blue''.
 
-<h5 id='named-hue-examples'>
-Examples of Simple Named Hues</h5>
+<h4 id='named-hue-examples'>
+Examples of Simple Named Hues</h4>
 
 	There are a total of 24 named hues not using the functional notation,
 	arranged evenly around the color wheel:
@@ -796,19 +814,6 @@ Examples of Simple Named Hues</h5>
 
 
 
-<h3 id="notes">
-Notes On Using Colors</h3>
-
-	Although colors can add significant amounts of information to
-	document and make them more readable, please consider the
-	W3C Web Content Accessibility Guidelines [[WCAG20]] when including color in your documents.
-
-	<ul>
-		<li><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color"><em>1.4.1 Use of Color:</em> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element</a>
-	</ul>
-
-
-
 
 <h2 id='the-hsl-notation'>
 HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>