Add 'See also' sections to references.

docs/styles/align.md

@@ -1,7 +1,6 @@
 # Align
 
 The `align` style aligns children within a container.
-Not to be confused with [`content-align`](../content_align).
 
 ## Syntax
 
@@ -92,3 +91,8 @@ widget.styles.align_horizontal = "right"
 # Change the vertical alignment of the children of a widget
 widget.styles.align_vertical = "middle"
 ```
+
+## See also
+
+ - [`content-align`](./content_align.md) to set the alignment of content inside a widget.
+ - [`text-align`](./text_align.md) to set the alignment of text in a widget.

docs/styles/background.md

@@ -87,3 +87,7 @@ widget.styles.background = Color.parse("#FF00FF")
 # Set with a color object instantiated directly
 widget.styles.background = Color(120, 60, 100)
 ```
+
+## See also
+
+ - [`color`](./color.md) to set the color of text in a widget.

docs/styles/border.md

@@ -139,3 +139,8 @@ widget.border = ("heavy", "white")
 # Set a red border on the left
 widget.border_left = ("outer", "red")
 ```
+
+## See also
+
+ - [`box-sizing`](./box_sizing.md) to specify how to account for the border in a widget's dimensions.
+ - [`outline`](./outline.md) to add an outline around the content of a widget.

docs/styles/box_sizing.md

@@ -57,3 +57,8 @@ widget.box_sizing = "border-box"
 # Set box sizing to content-box
 widget.box_sizing = "content-box"
 ```
+
+## See also
+
+ - [`border`](./border.md) to add a border around a widget.
+ - [`padding`](./padding.md) to add spacing around the content of a widget.

docs/styles/color.md

@@ -84,3 +84,7 @@ from textual.color import Color
 # Set with a color object
 widget.styles.color = Color.parse("pink")
 ```
+
+## See also
+
+ - [`background`](./background.md) to set the background color in a widget.

docs/styles/content_align.md

@@ -1,8 +1,6 @@
 # Content-align
 
 The `content-align` style aligns content _inside_ a widget.
-Not to be confused with [`align`](../align).
-
 
 ## Syntax
 
@@ -93,3 +91,8 @@ widget.styles.content_align_horizontal = "right"
 # Change the vertical alignment of the content of a widget
 widget.styles.content_align_vertical = "middle"
 ```
+
+## See also
+
+ - [`align`](./align.md) to set the alignment of children widgets inside a container.
+ - [`text-align`](./text_align.md) to set the alignment of text in a widget.

docs/styles/display.md

@@ -65,3 +65,7 @@ widget.display = False
 # Show the widget
 widget.display = True
 ```
+
+## See also
+
+ - [`visibility`](./visibility.md) to specify whether a widget is visible or not.

docs/styles/dock.md

@@ -73,3 +73,7 @@ widget.styles.dock = left;    # Dock   left.
 widget.styles.dock = right;   # Dock  right.
 widget.styles.dock = top;     # Dock    top.
 ```
+
+## See also
+
+ - The [layout guide](../guide/layout.md#docking) section on docking.

docs/styles/grid/column_span.md

@@ -46,3 +46,7 @@ column-span: 3
 ```py
 widget.styles.column_span = 3
 ```
+
+## See also
+
+ - [`row-span`](./row_span.md) to specify how many rows a widget spans.

docs/styles/grid/grid_columns.md

@@ -56,9 +56,13 @@ grid-columns: 50%;
 grid-columns: 1fr 2fr;
 ```
 
-### Python
+## Python
 
 ```py
 grid.styles.grid_columns = "50%"
 grid.styles.grid_columns = "1fr 2fr"
 ```
+
+## See also
+
+ - [`grid-rows`](./grid_rows.md) to specify the height of the grid rows.

docs/styles/grid/grid_rows.md

@@ -56,9 +56,13 @@ grid-rows: 50%;
 grid-rows: 1fr 2fr;
 ```
 
-### Python
+## Python
 
 ```py
 grid.styles.grid_rows = "50%"
 grid.styles.grid_rows = "1fr 2fr"
 ```
+
+## See also
+
+ - [`grid-columns`](./grid_columns.md) to specify the width of the grid columns.

docs/styles/grid/index.md

@@ -58,3 +58,7 @@ The spacing between grid cells is because of the `grid-gutter` declaration.
 !!! warning
 
     The properties listed on this page will only work when the layout is `grid`.
+
+## See also
+
+ - The [grid layout](../../guide/layout.md#grid) guide.

docs/styles/grid/row_span.md

@@ -49,3 +49,7 @@ row-span: 3
 ```py
 widget.styles.row_span = 3
 ```
+
+## See also
+
+ - [`column-span`](./column_span.md) to specify how many columns a widget spans.

docs/styles/height.md

@@ -91,3 +91,8 @@ self.styles.height = 10  # Explicit cell height can be an int
 self.styles.height = "50%"
 self.styles.height = "auto"
 ```
+
+## See also
+
+ - [`max-height`](./max_height.md) and [`min-height`](./min_height.md) to limit the height of a widget.
+ - [`width`](./width.md) to set the width of a widget.

docs/styles/layer.md

@@ -54,3 +54,8 @@ layer: below;
 # Draw the widget on the layer called 'below'
 widget.styles.layer = "below"
 ```
+
+## See also
+
+ - The [layout guide](../guide/layout.md#layers) section on layers.
+ - [`layers`](./layers.md) to define an ordered set of layers.

docs/styles/layers.md

@@ -52,3 +52,8 @@ layers: below above;
 # Bottom layer is called 'below', layer above it is called 'above'
 widget.style.layers = ("below", "above")
 ```
+
+## See also
+
+ - The [layout guide](../guide/layout.md#layers) section on layers.
+ - [`layer`](./layer.md) to set the layer a widget belongs to.

docs/styles/layout.md

@@ -53,3 +53,8 @@ layout: horizontal;
 ```python
 widget.styles.layout = "horizontal"
 ```
+
+## See also
+
+ - [Layout guide](../guide/layout.md).
+ - [Grid reference](./grid/index.md).

docs/styles/links/link_background.md

@@ -59,3 +59,8 @@ widget.styles.link_background = "$accent"
 # You can also use a `Color` object directly:
 widget.styles.link_background = Color(100, 30, 173)
 ```
+
+## See also
+
+ - [`link-color`](./link_color.md) to set the color of link text.
+ - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.

docs/styles/links/link_color.md

@@ -59,3 +59,8 @@ widget.styles.link_color = "$accent"
 # You can also use a `Color` object directly:
 widget.styles.link_color = Color(100, 30, 173)
 ```
+
+## See also
+
+ - [`link-background`](./link_background.md) to set the background color of link text.
+ - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.

docs/styles/links/link_hover_background.md

@@ -69,3 +69,9 @@ widget.styles.link_hover_background = "$accent"
 # You can also use a `Color` object directly:
 widget.styles.link_hover_background = Color(100, 30, 173)
 ```
+
+## See also
+
+ - [`link-background`](./link_background.md) to set the background color of link text.
+ - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
+ - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.

docs/styles/links/link_hover_color.md

@@ -72,3 +72,9 @@ widget.styles.link_hover_color = "black"
 # You can also use a `Color` object directly:
 widget.styles.link_hover_color = Color(100, 30, 173)
 ```
+
+## See also
+
+ - [`link-color`](./link_color.md) to set the color of link text.
+ - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
+ - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.

docs/styles/links/link_hover_style.md

@@ -70,3 +70,10 @@ link-hover-style: bold italic reverse;
 widget.styles.link_hover_style = "bold"
 widget.styles.link_hover_style = "bold italic reverse"
 ```
+
+## See also
+
+ - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
+ - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
+ - [`link-style`](./link_style.md) to set the style of link text.
+ - [`text-style`](../text_style.md) to set the style of text in a widget.

docs/styles/links/link_style.md

@@ -60,3 +60,8 @@ link-style: bold italic reverse;
 widget.styles.link_style = "bold"
 widget.styles.link_style = "bold italic reverse"
 ```
+
+## See also
+
+ - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
+ - [`text-style`](../text_style.md) to set the style of text in a widget.

docs/styles/margin.md

@@ -108,3 +108,7 @@ widget.styles.margin = (2, 4)
 # Set margin of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left
 widget.styles.margin = (1, 2, 3, 4)
 ```
+
+## See also
+
+ - [`padding`](./padding.md) to add spacing around the content of a widget.

docs/styles/max_height.md

@@ -54,3 +54,8 @@ widget.styles.max_height = 10
 # Set the maximum height to 25% of the viewport height
 widget.styles.max_height = "25vh"
 ```
+
+## See also
+
+ - [`min-height`](./min_height.md) to set a lower bound on the height of a widget.
+ - [`height`](./height.md) to set the height of a widget.

docs/styles/max_width.md

@@ -54,3 +54,8 @@ widget.styles.max_width = 10
 # Set the maximum width to 25% of the viewport width
 widget.styles.max_width = "25vh"
 ```
+
+## See also
+
+ - [`min-width`](./min_width.md) to set a lower bound on the width of a widget.
+ - [`width`](./width.md) to set the width of a widget.

docs/styles/min_height.md

@@ -54,3 +54,8 @@ widget.styles.min_height = 10
 # Set the minimum height to 25% of the viewport height
 widget.styles.min_height = "25vh"
 ```
+
+## See also
+
+ - [`max-height`](./max_height.md) to set an upper bound on the height of a widget.
+ - [`height`](./height.md) to set the height of a widget.

docs/styles/min_width.md

@@ -54,3 +54,8 @@ widget.styles.min_width = 10
 # Set the minimum width to 25% of the viewport width
 widget.styles.min_width = "25vh"
 ```
+
+## See also
+
+ - [`max-width`](./max_width.md) to set an upper bound on the width of a widget.
+ - [`width`](./width.md) to set the width of a widget.

docs/styles/offset.md

@@ -57,3 +57,7 @@ You have to set the two axes at the same time.
 # Move the widget 2 cells in the x direction, and 4 in the y direction.
 widget.styles.offset = (2, 4)
 ```
+
+## See also
+
+ - The [layout guide](../guide/layout.md#offsets) section on offsets.

docs/styles/opacity.md

@@ -50,3 +50,7 @@ Widget {
 # Fade the widget to 50% against its parent's background
 widget.styles.opacity = "50%"
 ```
+
+## See also
+
+ - [`text-opacity`](./text_opacity.md) to blend the color of a widget's content with its background color.

docs/styles/outline.md

@@ -117,3 +117,7 @@ widget.outline = ("heavy", "white")
 # Set a red outline on the left
 widget.outline_left = ("outer", "red")
 ```
+
+## See also
+
+ - [`border`](./border.md) to add a border around a widget.

docs/styles/padding.md

@@ -83,3 +83,8 @@ widget.styles.padding = (2, 4)
 # Set padding of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left
 widget.styles.padding = (1, 2, 3, 4)
 ```
+
+## See also
+
+ - [`box-sizing`](./box_sizing.md) to specify how to account for padding in a widget's dimensions.
+ - [`margin`](./margin.md) to add spacing around a widget.

docs/styles/scrollbar_colors/scrollbar_background.md

@@ -43,3 +43,10 @@ scrollbar-backround: blue;
 ```py
 widget.styles.scrollbar_background = "blue"
 ```
+
+## See also
+
+ - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged.
+ - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it.
+ - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars.
+ - [`scrollbar-corner-color`](./scrollbar_corner_color.md) to set the color of the corner where horizontal and vertical scrollbars meet.

docs/styles/scrollbar_colors/scrollbar_background_active.md

@@ -44,3 +44,9 @@ scrollbar-backround-active: red;
 ```py
 widget.styles.scrollbar_background_active = "red"
 ```
+
+## See also
+
+ - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars.
+ - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it.
+ - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged.

docs/styles/scrollbar_colors/scrollbar_background_hover.md

@@ -44,3 +44,11 @@ scrollbar-background-hover: purple;
 ```py
 widget.styles.scrollbar_background_hover = "purple"
 ```
+
+## See also
+
+## See also
+
+ - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars.
+ - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged.
+ - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it.

docs/styles/scrollbar_colors/scrollbar_color.md

@@ -44,3 +44,10 @@ scrollbar-color: cyan;
 ```py
 widget.styles.scrollbar_color = "cyan"
 ```
+
+## See also
+
+ - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars.
+ - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged.
+ - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it.
+ - [`scrollbar-corner-color`](./scrollbar_corner_color.md) to set the color of the corner where horizontal and vertical scrollbars meet.

docs/styles/scrollbar_colors/scrollbar_color_active.md

@@ -44,3 +44,9 @@ scrollbar-color-active: yellow;
 ```py
 widget.styles.scrollbar_color_active = "yellow"
 ```
+
+## See also
+
+ - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged.
+ - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars.
+ - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it.

docs/styles/scrollbar_colors/scrollbar_color_hover.md

@@ -44,3 +44,9 @@ scrollbar-color-hover: pink;
 ```py
 widget.styles.scrollbar_color_hover = "pink"
 ```
+
+## See also
+
+ - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it.
+ - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars.
+ - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged.

docs/styles/scrollbar_colors/scrollbar_corner_color.md

@@ -42,3 +42,8 @@ scrollbar-corner-color: white;
 ```py
 widget.styles.scrollbar_corner_color = "white"
 ```
+
+## See also
+
+ - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars.
+ - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars.

docs/styles/text_align.md

@@ -50,3 +50,8 @@ text-align: right;
 # Set text in the widget to be right aligned
 widget.styles.text_align = "right"
 ```
+
+## See also
+
+ - [`align`](./align.md) to set the alignment of children widgets inside a container.
+ - [`content-align`](./content_align.md) to set the alignment of content inside a widget.

docs/styles/text_opacity.md

@@ -47,3 +47,7 @@ text-opacity: 50%;
 # Set the text to be "half-faded" against the background of the widget
 widget.styles.text_opacity = "50%"
 ```
+
+## See also
+
+ - [`opacity`](./opacity.md) to specify the transparency of a whole widget.

docs/styles/visibility.md

@@ -113,3 +113,7 @@ widget.visible = False
 # Make the widget visible again
 widget.visible = True
 ```
+
+## See also
+
+ - [`display`](./display.md) to specify whether a widget is displayed or not.

docs/styles/width.md

@@ -92,3 +92,8 @@ widget.styles.width = 10
 widget.styles.width = "50%
 widget.styles.width = "auto"
 ```
+
+## See also
+
+ - [`max-width`](./max_width.md) and [`min-width`](./min_width.md) to limit the width of a widget.
+ - [`height`](./height.md) to set the height of a widget.