Fix links to CSS types.

docs/styles/_template.md

@@ -8,7 +8,10 @@ One or two sentences is typically enough. -->
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-<!-- Formal syntax description of the rule -->
+<!--
+Formal syntax description of the rule
+rule-name: <a href="../../css_types/type_one">&lt;type-one&gt;</a>;
+-->
 --8<-- "docs/snippets/syntax_block_end.md"
 
 <!-- Description of what the rule uses the types/values for. -->

docs/styles/align.md

@@ -6,20 +6,20 @@ Not to be confused with [`content-align`](../content_align).
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+align: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a> <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
 
-align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
+align-horizontal: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a>;
-align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+align-vertical: <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
+The style `align` takes a [`<horizontal>`](../../css_types/horizontal) followed by a [`<vertical>`](../../css_types/vertical).
 
 You can specify the alignment of children on both the horizontal and vertical axes at the same time,
 or on each of the axis separately.
 To specify alignment on a single axis, use the respective style and type:
 
- - `align-horizontal` takes a [`<horizontal>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
+ - `align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- - `align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
+ - `align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
 
 ### Values
 

docs/styles/background.md

@@ -5,10 +5,10 @@ The `background` rule sets the background color of a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `background` needs a [`<color>`](../css_types/color.md) followed by an optional [`<percentage>`](../css_types/percentage.md) to specify the color transparency.
+The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
 
 ### Values
 

docs/styles/border.md

@@ -5,15 +5,15 @@ The `border` rule enables the drawing of a box around a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-border: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
+border: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
 
-border-top: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
+border-top: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
-border-right: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
+border-right: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
-border-bottom: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
+border-bottom: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
-border-left: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
+border-left: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `border` accepts an optional [`<border>`](../css_types/border.md) that sets the visual style of the widget border and an optional [`<color>`](../css_types/color.md) to set the color of the border.
+The style `border` accepts an optional [`<border>`](../../css_types/border) that sets the visual style of the widget border and an optional [`<color>`](../../css_types/color) to set the color of the border.
 
 Borders may also be set individually for the four edges of a widget with the `border-top`, `border-right`, `border-bottom` and `border-left` rules.
 

docs/styles/color.md

@@ -5,12 +5,12 @@ The `color` rule sets the text color of a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-color: (<a href="../css_types/color.md">&lt;color&gt;</a> | auto) [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+color: (<a href="../../css_types/color">&lt;color&gt;</a> | auto) [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `color` needs a [`<color>`](../css_types/color.md) followed by an optional [`<percentage>`](../css_types/percentage.md) to specify the color transparency.
+The style `color` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
 
-Instead of a [`<color>`](../css_types/color.md), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
+Instead of a [`<color>`](../../css_types/color), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
 
 ### Values
 

docs/styles/content_align.md

@@ -7,20 +7,20 @@ Not to be confused with [`align`](../align).
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-content-align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+content-align: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a> <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
 
-content-align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
+content-align-horizontal: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a>;
-content-align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+content-align-vertical: <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `content-align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
+The style `content-align` takes a [`<horizontal>`](../../css_types/horizontal) followed by a [`<vertical>`](../../css_types/vertical).
 
 You can specify the alignment of content on both the horizontal and vertical axes at the same time,
 or on each of the axis separately.
 To specify content alignment on a single axis, use the respective style and type:
 
- - `content-align-horizontal` takes a [`<horizontal>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
+ - `content-align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- - `content-align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
+ - `content-align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
 
 ### Values
 

docs/styles/grid/column_span.md

@@ -9,10 +9,10 @@ The `column-span` style specifies how many rows a widget will span in a grid lay
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-column-span: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+column-span: <a href="../../css_types/integer">&lt;integer&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `column-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many columns the given widget spans.
+The style `column-span` accepts a single non-negative [`<integer>`](../../../css_types/integer) that quantifies how many columns the given widget spans.
 
 ### Values
 

docs/styles/grid/grid_columns.md

@@ -9,13 +9,13 @@ The `grid-columns` style allows to define the width of the columns of the grid.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-grid-columns: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
+grid-columns: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `grid-columns` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the columns of the grid.
+The style `grid-columns` takes one or more [`<scalar>`](../../../css_types/scalar) that specify the length of the columns of the grid.
 
 If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.
-If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
+If the number of [`<scalar>`](../../../css_types/scalar) is in excess, the excess is ignored.
 
 ### Values
 

docs/styles/grid/grid_gutter.md

@@ -13,11 +13,11 @@ No spacing is added between the edges of cells and the edges of the container.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-grid-gutter: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> [<a href="../css_types/scalar.md">&lt;scalar&gt;</a>];
+grid-gutter: <a href="../../css_types/scalar">&lt;scalar&gt;</a> [<a href="../../css_types/scalar">&lt;scalar&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `grid-gutter` takes one or two [`<scalar>`](../../css_types/scalar.md) that set the length of the gutter along the vertical and horizontal axes.
+The style `grid-gutter` takes one or two [`<scalar>`](../../../css_types/scalar) that set the length of the gutter along the vertical and horizontal axes.
-If only one [`<scalar>`](../../css_types/scalar.md) is supplied, it sets the vertical and horizontal gutters.
+If only one [`<scalar>`](../../../css_types/scalar) is supplied, it sets the vertical and horizontal gutters.
 If two are supplied, they set the vertical and horizontal gutters, respectively.
 
 ### Values

docs/styles/grid/grid_rows.md

@@ -9,13 +9,13 @@ The `grid-rows` style allows to define the height of the rows of the grid.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-grid-rows: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
+grid-rows: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `grid-rows` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the rows of the grid.
+The style `grid-rows` takes one or more [`<scalar>`](../../../css_types/scalar) that specify the length of the rows of the grid.
 
 If there are more rows in the grid than scalars specified in `grid-rows`, they are reused cyclically.
-If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
+If the number of [`<scalar>`](../../../css_types/scalar) is in excess, the excess is ignored.
 
 ### Values
 

docs/styles/grid/grid_size.md

@@ -11,10 +11,10 @@ The number of rows can be left unspecified and it will be computed automatically
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-grid-size: <a href="../css_types/integer.md">&lt;integer&gt;</a> [<a href="../css_types/integer.md">&lt;integer&gt;</a>];
+grid-size: <a href="../../css_types/integer">&lt;integer&gt;</a> [<a href="../../css_types/integer">&lt;integer&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `grid-size` takes one or two non-negative [`<integer>`](../../css_types/integer.md).
+The style `grid-size` takes one or two non-negative [`<integer>`](../../../css_types/integer).
 The first defines how many columns there are in the grid.
 If present, the second one sets the number of rows – regardless of the number of children of the grid –, otherwise the number of rows is computed automatically.
 

docs/styles/grid/index.md

@@ -16,17 +16,17 @@ For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-<a href="./column_span.md">column-span</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+<a href="./column_span.md">column-span</a>: <a href="../../css_types/integer">&lt;integer&gt;</a>;
 
-<a href="./grid_columns.md">grid-columns</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
+<a href="./grid_columns.md">grid-columns</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
 
-<a href="./grid_gutter.md">grid-gutter</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> [<a href="../css_types/scalar.md">&lt;scalar&gt;</a>];
+<a href="./grid_gutter.md">grid-gutter</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a> [<a href="../../css_types/scalar">&lt;scalar&gt;</a>];
 
-<a href="./grid_rows.md">grid-rows</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
+<a href="./grid_rows.md">grid-rows</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
 
-<a href="./grid_size.md">grid-size</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a> [<a href="../css_types/integer.md">&lt;integer&gt;</a>];
+<a href="./grid_size.md">grid-size</a>: <a href="../../css_types/integer">&lt;integer&gt;</a> [<a href="../../css_types/integer">&lt;integer&gt;</a>];
 
-<a href="./row_span.md">row-span</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+<a href="./row_span.md">row-span</a>: <a href="../../css_types/integer">&lt;integer&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
 Visit each style's reference page to learn more about how the values are used.

docs/styles/grid/row_span.md

@@ -9,10 +9,10 @@ The `row-span` style specifies how many rows a widget will span in a grid layout
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-row-span: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+row-span: <a href="../../css_types/integer">&lt;integer&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `row-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many rows the given widget spans.
+The style `row-span` accepts a single non-negative [`<integer>`](../../../css_types/integer) that quantifies how many rows the given widget spans.
 
 ### Values
 

docs/styles/height.md

@@ -5,10 +5,10 @@ The `height` rule sets a widget's height.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The style `height` needs a [`<scalar>`](../css_types/scalar.md) to determine the vertical length of the widget.
+The style `height` needs a [`<scalar>`](../../css_types/scalar) to determine the vertical length of the widget.
 By default, it sets the height of the content area, but if [`box-sizing`](./box_sizing) is set to `border-box` it sets the height of the border area.
 
 ### Values

docs/styles/layer.md

@@ -5,11 +5,11 @@ The `layer` property defines the layer a widget belongs to.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-layer: <a href="../css_types/name.md">&lt;name&gt;</a>;
+layer: <a href="../../css_types/name">&lt;name&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `layer` rule accepts a [`<name>`](../css_types/name.md) that defines the layer this widget belongs to.
+The `layer` rule accepts a [`<name>`](../../css_types/name) that defines the layer this widget belongs to.
-This [`<name>`](../css_types/name.md) must correspond to a [`<name>`](../css_types/name.md) that has been defined in a [`layers`](./layers.md) rule by an ancestor of this widget.
+This [`<name>`](../../css_types/name) must correspond to a [`<name>`](../../css_types/name) that has been defined in a [`layers`](./layers) rule by an ancestor of this widget.
 
 More information on layers can be found in the [guide](../guide/layout.md#layers).
 

docs/styles/layers.md

@@ -5,10 +5,10 @@ The `layers` property allows you to define an ordered set of layers.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-layers: <a href="../css_types/name.md">&lt;name&gt;</a>+;
+layers: <a href="../../css_types/name">&lt;name&gt;</a>+;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `layers` rule accepts one or more [`<name>`](../css_types/name.md) that define the layers that the widget is aware of, and the order in which they will be painted on the screen.
+The `layers` rule accepts one or more [`<name>`](../../css_types/name) that define the layers that the widget is aware of, and the order in which they will be painted on the screen.
 
 The values used here can later be referenced using the [`layer`](../layer) property.
 The layers defined first in the list are drawn under the layers that are defined later in the list.

docs/styles/links/index.md

@@ -19,17 +19,17 @@ There are a number of styles which influence the appearance of these links withi
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-<a href="./link_background.md">link-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+<a href="./link_background.md">link-background</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_color.md">link-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+<a href="./link_color.md">link-color</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_style.md">link-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
+<a href="./link_style.md">link-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 
-<a href="./link_hover_background.md">link-hover-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+<a href="./link_hover_background.md">link-hover-background</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_hover_color.md">link-hover-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+<a href="./link_hover_color.md">link-hover-color</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_hover_style.md">link-hover-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
+<a href="./link_hover_style.md">link-hover-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
 Visit each style's reference page to learn more about how the values are used.

docs/styles/links/link_background.md

@@ -9,10 +9,10 @@ The `link-background` sets the background color of the link.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+link-background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links.
+`link-background` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the background color of text enclosed in Textual action links.
 
 ### Values
 

docs/styles/links/link_color.md

@@ -9,10 +9,10 @@ The `link-color` sets the color of the link text.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+link-color: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links.
+`link-color` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of text enclosed in Textual action links.
 
 ### Values
 

docs/styles/links/link_hover_background.md

@@ -9,10 +9,10 @@ The `link-hover-background` sets the background color of the link when the mouse
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-hover-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+link-hover-background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
+`link-hover-background` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
 
 ### Values
 

docs/styles/links/link_hover_color.md

@@ -9,10 +9,10 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-hover-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
+link-hover-color: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
+`link-hover-color` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
 
 ### Values
 

docs/styles/links/link_hover_style.md

@@ -9,10 +9,10 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-hover-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
+link-hover-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-hover-style` applies its [`<text-style>`](../../css_types/text_style.md) to the text of Textual action links when the mouse pointer is over them.
+`link-hover-style` applies its [`<text-style>`](../../../css_types/text_style) to the text of Textual action links when the mouse pointer is over them.
 
 ### Values
 

docs/styles/links/link_style.md

@@ -9,7 +9,7 @@ The `link-style` sets the text style for the link text.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
+link-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
 `link-style` will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.

docs/styles/margin.md

@@ -5,25 +5,25 @@ The `margin` rule specifies spacing around a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-margin: <a href="../css_types/integer.md">&lt;integer&gt;</a>
+margin: <a href="../../css_types/integer">&lt;integer&gt;</a>
       # one value for all edges
-      | <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a>
+      | <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a>
       # top/bot   left/right
-      | <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+      | <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a>;
       # top       right     bot       left
 
-margin-top: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+margin-top: <a href="../../css_types/integer">&lt;integer&gt;</a>;
-margin-right: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+margin-right: <a href="../../css_types/integer">&lt;integer&gt;</a>;
-margin-bottom: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+margin-bottom: <a href="../../css_types/integer">&lt;integer&gt;</a>;
-margin-left: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
+margin-left: <a href="../../css_types/integer">&lt;integer&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `margin` specifies spacing around the four edges of the widget equal to the [`<integer>`](../css_types/integer.md) specified.
+The `margin` specifies spacing around the four edges of the widget equal to the [`<integer>`](../../css_types/integer) specified.
 The number of values given defines what edges get what margin:
 
- - 1 [`<integer>`](../css_types/integer.md) sets the same margin for the four edges of the widget;
+ - 1 [`<integer>`](../../css_types/integer) sets the same margin for the four edges of the widget;
- - 2 [`<integer>`](../css_types/integer.md) set margin for top/bottom and left/right edges, respectively.
+ - 2 [`<integer>`](../../css_types/integer) set margin for top/bottom and left/right edges, respectively.
- - 4 [`<integer>`](../css_types/integer.md) set margin for the top, right, bottom, and left edges, respectively.
+ - 4 [`<integer>`](../../css_types/integer) set margin for the top, right, bottom, and left edges, respectively.
 
 !!! tip
 

docs/styles/max_height.md

@@ -5,10 +5,10 @@ The `max-height` rule sets a maximum height for a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-max-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+max-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `max-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`height`](./height.md) of a widget.
+The `max-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`height`](./height) of a widget.
 That is, the height of a widget is never allowed to exceed `max-height`.
 
 ### Values

docs/styles/max_width.md

@@ -5,10 +5,10 @@ The `max-width` rule sets a maximum width for a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-max-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+max-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `max-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`width`](./width.md) of a widget.
+The `max-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`width`](./width) of a widget.
 That is, the width of a widget is never allowed to exceed `max-width`.
 
 ### Values

docs/styles/min_height.md

@@ -5,10 +5,10 @@ The `min-height` rule sets a minimum height for a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-min-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+min-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `min-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`height`](./height.md) of a widget.
+The `min-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`height`](./height) of a widget.
 That is, the height of a widget is never allowed to be under `min-height`.
 
 ### Values

docs/styles/min_width.md

@@ -5,10 +5,10 @@ The `min-width` rule sets a minimum width for a widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-min-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+min-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The `min-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`width`](./width.md) of a widget.
+The `min-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`width`](./width) of a widget.
 That is, the width of a widget is never allowed to be under `min-width`.
 
 ### Values

docs/styles/offset.md

@@ -5,13 +5,13 @@ The `offset` rule defines an offset for the position of the widget.
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-offset: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+offset: <a href="../../css_types/scalar">&lt;scalar&gt;</a> <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
 
-offset-x: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
+offset-x: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
-offset-y: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> 
+offset-y: <a href="../../css_types/scalar">&lt;scalar&gt;</a> 
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The two [`<scalar>`](../css_types/scalar.md) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget.
+The two [`<scalar>`](../../css_types/scalar) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget.
 
 To specify an offset along a single axis, you can use `offset-x` and `offset-y`.