Move snippets to top level of docs.

docs/snippets/color_css_syntax.md

@@ -0,0 +1,9 @@
+The legal values for a [color](/styles/css_units/color) depend on the [class `Color`][textual.color.Color] and include:
+
+ - a recognised [named color](../../api/color#textual.color--named-colors) (e.g., `red`);
+ - a hexadecimal number representing the RGB values of the color (e.g., `#F35573`);
+ - a color description in the RGB system (e.g., `rgb(23,78,200)`);
+ - a color description in the HSL system (e.g., `hsl(290,70%,80%)`); and
+ - a color variable from [Textual's default themes](../../guide/design#theme-reference).
+
+For more details about the exact formats accepted, see [the class method `Color.parse`][textual.color.Color.parse].

docs/snippets/fractional_syntax.md

@@ -0,0 +1,6 @@
+A [fractional](/styles/css_units/fractional) value can be set to
+
+ - a float between 0 and 1 (e.g., `0.45`); or
+ - a percentage between 0% and 100% (e.g., `45%`).
+
+Values outside their ranges will be clamped.

docs/snippets/percentage_syntax.md

@@ -0,0 +1,2 @@
+A [percentage](/styles/css_units/percentage) is a number followed by the percent sign.
+The number doesn't have to be an integer and values are clamped between 0% and 100%.

docs/snippets/scalar_syntax.md

@@ -0,0 +1,8 @@
+A [scalar](/styles/css_units/scalar) can be any of the following:
+
+ - a fixed number of cells (e.g., `10`);
+ - a fractional proportion relative to the sizes of the other widgets (e.g., `1fr`);
+ - a percentage relative to the container widget (e.g., `50%`);
+ - a percentage relative to the container width/height (e.g., `25w`/`75h`);
+ - a percentage relative to the viewport width/height (e.g., `25vw`/`75vh`); or
+ - the special value `auto` to compute the optimal size to fit without scrolling.

docs/snippets/text_style_syntax.md

@@ -0,0 +1,10 @@
+The [text style](/styles/css_units/text_style) unit can be any _space-separated_ combination of the following values:
+
+| Value       | Description                                                    |
+|-------------|----------------------------------------------------------------|
+| `bold`      | **bold text**                                                  |
+| `italic`    | _italic text_                                                  |
+| `reverse`   | reverse video text (foreground and background colors reversed) |
+| `underline` | <u>underline text</u>                                          |
+| `strike`    | <s>strikethrough text</s>                                      |
+| `none`      | plain text with no styling                                     |