[css-ui-4] Editorial: move text around

This puts the general discussion of outlines under the definition of the
outline shorthand property, and discussion of the effects of the
longhands under the specific longhands.

Author: w3cgruntbot

css-ui-4/Overview.bs

@@ -264,47 +264,6 @@ or if ''outline-style/auto'' is specified together with an <<'outline-width'>> v
 but without an explicit <<'outline-style'>> or <<'outline-color'>> value,
 both 'outline-style' and 'outline-color' are set to ''outine-style/auto''.
 
-<h3 id="outline-width">Outline Thickness: the 'outline-width' property</h3>
-
-<pre class="propdef">
-Name: outline-width
-Value: <<line-width>>
-Initial: medium
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: absolute length, [=snapped as a border width=]; ''0'' if the outline style is ''border-style/none''.
-Animation type: by computed value
-</pre>
-
-
-<h3 id="outline-style">Outline Patterns: the 'outline-style' property</h3>
-
-<pre class="propdef">
-Name: outline-style
-Value: auto | <<outline-line-style>>
-Initial: none
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: specified keyword
-Animation type: by computed value
-</pre>
-
-
-<h3 id="outline-color">Outline Colors: the 'outline-color' property</h3>
-
-<pre class="propdef">
-Name: outline-color
-Value: auto | [ <<color>> | <<image-1D>> ] | invert
-Initial: auto
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: see below
-Animation type: by computed value
-</pre>
-
 The outline created with the outline properties is drawn "over" a box,
 i.e., the outline is always on top
 and doesn't influence the position or size of the box,
@@ -332,10 +291,71 @@ for conveying the concept of focus to the user.
 
 Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.
 
+Note: The outline is the same on all sides.
+In contrast to borders,
+there are no ''outline-top'', ''outline-left'', etc. properties.
+
+This specification does not define how multiple overlapping outlines are drawn
+or how outlines are drawn for boxes that are partially obscured behind other elements.
+
+<div class="example">
+	Here's an example of drawing a thick outline around a BUTTON element:
+	<pre><code class="lang-css">
+	button { outline: thick solid }
+	</code></pre>
+</div>
+
+Graphical user interfaces may use outlines around elements
+to tell the user which element on the page has the focus.
+These outlines are shown in addition to any borders,
+and switching outlines on and off should not cause the document to reflow.
+The focus is the subject of user interaction in a document
+(e.g. for entering text or selecting a button).
+
+<div class="example">
+	For example, to draw a thick black line around an element when it has the focus,
+	and a thick red line when it is active,
+	the following rules can be used:
+	<pre><code class="lang-css">
+	:focus  { outline: thick solid black }
+	:active { outline: thick solid red }
+	</code></pre>
+</div>
+
+Note: Since the outline does not affect formatting
+(i.e., no space is left for it in the box model),
+it may well overlap other elements on the page.
+
+<h3 id="outline-width">Outline Thickness: the 'outline-width' property</h3>
+
+<pre class="propdef">
+Name: outline-width
+Value: <<line-width>>
+Initial: medium
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: absolute length, [=snapped as a border width=]; ''0'' if the outline style is ''border-style/none''.
+Animation type: by computed value
+</pre>
 
 The 'outline-width' property accepts
 the same values as 'border-width'
-([[css-backgrounds-3#border-width]]).
+([[css-backgrounds-3#border-width]]),
+with the same meaning.
+
+<h3 id="outline-style">Outline Patterns: the 'outline-style' property</h3>
+
+<pre class="propdef">
+Name: outline-style
+Value: auto | <<outline-line-style>>
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: specified keyword
+Animation type: by computed value
+</pre>
 
 <dfn><<outline-line-style>></dfn> accepts
 the same values as <<line-style>>
@@ -346,6 +366,7 @@ except that
 In addition,
 the 'outline-style' property
 accepts the value ''outline-style/auto''.
+
 The ''outline-style/auto'' value permits the user agent
 to render a custom outline style,
 typically a style which is either a user interface default for the platform,
@@ -360,6 +381,19 @@ but this specification does not define how the rendering is impacted (if at all)
 User agents may treat ''outline-style/auto'' as
 ''outline-style/solid''.
 
+<h3 id="outline-color">Outline Colors: the 'outline-color' property</h3>
+
+<pre class="propdef">
+Name: outline-color
+Value: auto | [ <<color>> | <<image-1D>> ] | invert
+Initial: auto
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: see below
+Animation type: by computed value
+</pre>
+
 The 'outline-color' property
 accepts all values of <'border-color'>,
 as well as the following keywords:
@@ -396,42 +430,6 @@ The computed value for ''outline-color/invert'' is ''outline-color/invert''.
 For <<color>> values, see [[css-color-4#resolving-color-values]] in [[!CSS-COLOR-4]].
 For <<image-1D>> values, see [[css-images-4#stripes]] in [[!CSS-IMAGES-4]].
 
-Note: The outline is the same on all sides.
-In contrast to borders,
-there are no ''outline-top'', ''outline-left'', etc. properties.
-
-This specification does not define how multiple overlapping outlines are drawn
-or how outlines are drawn for boxes that are partially obscured behind other elements.
-
-<div class="example">
-	Here's an example of drawing a thick outline around a BUTTON element:
-	<pre><code class="lang-css">
-	button { outline: thick solid }
-	</code></pre>
-</div>
-
-Graphical user interfaces may use outlines around elements
-to tell the user which element on the page has the focus.
-These outlines are shown in addition to any borders,
-and switching outlines on and off should not cause the document to reflow.
-The focus is the subject of user interaction in a document
-(e.g. for entering text or selecting a button).
-
-<div class="example">
-	For example, to draw a thick black line around an element when it has the focus,
-	and a thick red line when it is active,
-	the following rules can be used:
-	<pre><code class="lang-css">
-	:focus  { outline: thick solid black }
-	:active { outline: thick solid red }
-	</code></pre>
-</div>
-
-Note: Since the outline does not affect formatting
-(i.e., no space is left for it in the box model),
-it may well overlap other elements on the page.
-
-
 <h3 id="outline-offset">Offsetting the Outline: the 'outline-offset' property</h3>
 
 By default, the outline is drawn starting just outside the <a>border edge</a>.