Inline css type values in their reference.

[skip ci]

docs/css_types/_template.md

@@ -6,10 +6,41 @@
 
 ## Syntax
 
+
 <!--
---8<-- "docs/snippets/type_syntax/type_name.md"
+For a simple type like <integer>:
+
+Describe the type in a short paragraph with an absolute link to the type page.
+E.g., “The [`<my-type>`](/css_types/my_type) type is such and such with sprinkles on top.”
 -->
 
+<!--
+For a type with many different values like <color>:
+
+Introduce the type with a link to [`<my-type>`](/css_types/my_type).
+Then, a bullet list with the variants accepted:
+
+ - you can create this type with X Y Z;
+ - you can also do A B C; and
+ - also use D E F.
+-->
+
+<!--
+For a type that accepts specific options like <border>:
+
+Add a sentence and a table. Consider ordering values in alphabetical order if there is no other obvious ordering. See below:
+
+The [`<my-type>`](/css_types/my_type) type can take any of the following values:
+
+| Value         | Description                                   |
+|---------------|-----------------------------------------------|
+| `abc`         | Describe here.                                |
+| `other val`   | Describe this one also.                       |
+| `value three` | Please use full stops.                        |
+| `zyx`         | Describe the value without assuming any rule. |
+-->
+
+
 ## Examples
 
 ### CSS

docs/css_types/border.md

@@ -4,7 +4,25 @@ The `<border>` CSS type represents a border style.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/border.md"
+The [`<border>`](/css_types/border) type can take any of the following values:
+
+| Border type | Description                                              |
+|-------------|----------------------------------------------------------|
+| `ascii`   | A border with plus, hyphen, and vertical bar characters. |
+| `blank`   | A blank border (reserves space for a border).            |
+| `dashed`  | Dashed line border.                                      |
+| `double`  | Double lined border.                                     |
+| `heavy`   | Heavy border.                                            |
+| `hidden`  | Alias for "none".                                        |
+| `hkey`    | Horizontal key-line border.                              |
+| `inner`   | Thick solid border.                                      |
+| `none`    | Disabled border.                                         |
+| `outer`   | Solid border with additional space around content.       |
+| `round`   | Rounded corners.                                         |
+| `solid`   | Solid border.                                            |
+| `tall`    | Solid border with additional space top and bottom.       |
+| `vkey`    | Vertical key-line border.                                |
+| `wide`    | Solid border with additional space left and right.       |
 
 ## Border command
 

docs/css_types/color.md

@@ -8,7 +8,15 @@ The `<color>` CSS type represents a color.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/color.md"
+The legal values for a [`<color>`](/css_types/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
+
+For more details about the exact formats accepted, see [the class method `Color.parse`][textual.color.Color.parse].
+[Textual's default themes](../../guide/design#theme-reference) also provide many CSS variables with colors.
 
 ## Examples
 

docs/css_types/horizontal.md

@@ -4,7 +4,13 @@ The `<horizontal>` CSS type represents a position along the horizontal axis.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/horizontal.md"
+The [`<horizontal>`](/css_types/horizontal) type can take any of the following values:
+
+| Value            | Description                                  |
+| ---------------- | -------------------------------------------- |
+| `center`         | Aligns in the center of the horizontal axis. |
+| `left` (default) | Aligns on the left of the horizontal axis.   |
+| `right`          | Aligns on the right of the horizontal axis.  |
 
 ## Examples
 

docs/css_types/integer.md

@@ -4,7 +4,7 @@ The `<integer>` CSS type represents an integer number.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/integer.md"
+An [`<integer>`](/css_types/integer) is any valid integer number like `-10` or `42`.
 
 !!! note
 

docs/css_types/name.md

@@ -4,7 +4,10 @@ The `<name>` type represents a sequence of characters that identifies something.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/name.md"
+A [`<name>`](/css_types/name) is any non-empty sequence of characters:
+
+ - starting with a letter `a-z`, `A-Z`, or underscore `_`; and
+ - followed by zero or more letters `a-zA-Z`, digits `0-9`, underscores `_`, and hiphens `-`.
 
 ## Examples
 

docs/css_types/number.md

@@ -4,7 +4,7 @@ The `<number>` CSS type represents a real number, which can be an integer or a n
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/number.md"
+A [`<number>`](/css_types/number) is an [`<integer>`](/css_types/integer), optionally followed by the decimal point `.` and a decimal part composed of one or more digits.
 
 ## Examples
 

docs/css_types/overflow.md

@@ -4,7 +4,13 @@ The `<overflow>` CSS type represents overflow modes.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/overflow.md"
+The [`<overflow>`](/css_types/overflow) type can take any of the following values:
+
+| Value    | Description                            |
+|----------|----------------------------------------|
+| `auto`   | Determine overflow mode automatically. |
+| `hidden` | Don't overflow.                        |
+| `scroll` | Allow overflowing.                     |
 
 ## Examples
 

docs/css_types/percentage.md

@@ -9,7 +9,7 @@ It is often used to represent values that are relative to the parent's values.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/percentage.md"
+A [`<percentage>`](/css_types/percentage) is a [`<number>`](/css_types/number) followed by the percent sign `%` (without spaces).
 Some rules may clamp the values between `0%` and `100%`.
 
 ## Examples

docs/css_types/scalar.md

@@ -10,7 +10,14 @@ It is used to represent lengths, for example in the [`width`](../styles/width.md
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/scalar.md"
+A [`<scalar>`](/css_types/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.
 
 A complete reference table and detailed explanations follow.
 You can [skip to the examples](#examples).

docs/css_types/text_align.md

@@ -8,7 +8,20 @@ The `<text-align>` CSS type represents alignments that can be applied to text.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/text_align.md"
+A [`<text-align>`](/css_types/text_align) can be any of the following values:
+
+| Value     | Alignment type                       |
+|-----------|--------------------------------------|
+| `center`  | Center alignment.                    |
+| `end`     | Alias for `right`.                   |
+| `justify` | Text is justified inside the widget. |
+| `left`    | Left alignment.                      |
+| `right`   | Right alignment.                     |
+| `start`   | Alias for `left`.                    |
+
+!!! tip
+
+    The meanings of `start` and `end` will likely change when RTL languages become supported by Textual.
 
 ## Examples
 

docs/css_types/text_style.md

@@ -8,7 +8,16 @@ The `<text-style>` CSS type represents styles that can be applied to text.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/text_style.md"
+A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combination of the following values:
+
+| Value       | Description                                                     |
+|-------------|-----------------------------------------------------------------|
+| `bold`      | **Bold text.**                                                  |
+| `italic`    | _Italic text._                                                  |
+| `none`      | Plain text with no styling.                                     |
+| `reverse`   | Reverse video text (foreground and background colors reversed). |
+| `strike`    | <s>Strikethrough text.</s>                                      |
+| `underline` | <u>Underline text.</u>                                          |
 
 ## Examples
 

docs/css_types/vertical.md

@@ -4,7 +4,13 @@ The `<vertical>` CSS type represents a position along the vertical axis.
 
 ## Syntax
 
---8<-- "docs/snippets/type_syntax/vertical.md"
+The [`<vertical>`](/css_types/vertical) type can take any of the following values:
+
+| Value           | Description                                |
+| --------------- | ------------------------------------------ |
+| `bottom`        | Aligns at the bottom of the vertical axis. |
+| `middle`        | Aligns in the middle of the vertical axis. |
+| `top` (default) | Aligns at the top of the vertical axis.    |
 
 ## Examples