lots more docs

docs/styles/background.md

@@ -2,6 +2,10 @@
 
 The `background` rule sets the background color of the widget.
 
+## Example
+
+This example creates three widgets and applies a different background to each.
+
 === "background.py"
 
     ```python

docs/styles/border.md

@@ -42,6 +42,12 @@ This examples shows three widgets with different border styles.
     --8<-- "docs/examples/styles/border.py"
     ```
 
+=== "border.css"
+
+    ```css
+    --8<-- "docs/examples/styles/border.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/border.py"}

docs/styles/box_sizing.md

@@ -16,6 +16,12 @@ Both widgets in this example have the same height (5). The top widget has `box-s
     --8<-- "docs/examples/styles/box_sizing.py"
     ```
 
+=== "box_sizing.css"
+
+    ```css
+    --8<-- "docs/examples/styles/box_sizing.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/box_sizing.py"}

docs/styles/color.md

@@ -2,12 +2,22 @@
 
 The `color` rule sets the text color of a Widget.
 
+## Example
+
+This example sets a different text color to three different widgets.
+
 === "color.py"
 
     ```python
     --8<-- "docs/examples/styles/color.py"
     ```
 
+=== "color.css"
+
+    ```css
+    --8<-- "docs/examples/styles/color.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/color.py"}

docs/styles/display.md

@@ -12,6 +12,12 @@ Note that the second widget is hidden by adding the "hidden" class which sets th
     --8<-- "docs/examples/styles/display.py"
     ```
 
+=== "display.css"
+
+    ```css
+    --8<-- "docs/examples/styles/display.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/display.py"}

docs/styles/height.md

@@ -4,12 +4,20 @@ The `height` rule sets a widget's height. By default, it sets the height of the
 
 ## Example
 
+This examples applies a widget with a height of 50% of the screen.
+
 === "height.py"
 
     ```python
     --8<-- "docs/examples/styles/height.py"
     ```
 
+=== "height.css"
+
+    ```python
+    --8<-- "docs/examples/styles/height.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/height.py"}

docs/styles/margin.md

@@ -12,12 +12,20 @@ Margin may also be set individually by setting `margin-top`, `margin-right`, `ma
 
 ## Example
 
+In this example we add a large margin to a some static text.
+
 === "margin.py"
 
     ```python
     --8<-- "docs/examples/styles/margin.py"
     ```
 
+=== "margin.css"
+
+    ```css
+    --8<-- "docs/examples/styles/margin.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/margin.py"}

docs/styles/offset.md

@@ -4,12 +4,20 @@ The `offset` rule adds an offset to the widget's position.
 
 ## Example
 
+In this example, we have 3 widgets with differing offsets.
+
 === "offset.py"
 
     ```python
     --8<-- "docs/examples/styles/offset.py"
     ```
 
+=== "offset.css"
+
+    ```css
+    --8<-- "docs/examples/styles/offset.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/offset.py"}

docs/styles/outline.md

@@ -36,6 +36,12 @@ This examples shows a widget with an outline. Note how the outline occludes the
     --8<-- "docs/examples/styles/outline.py"
     ```
 
+=== "outline.css"
+
+    ```css
+    --8<-- "docs/examples/styles/outline.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/outline.py"}

docs/styles/overflow.md

@@ -18,12 +18,18 @@ Here we split the screen in to left and right sections, each with three vertical
 
 The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The right side has `overflow-y: hidden` which will prevent a scrollbar from being show.
 
-=== "width.py"
+=== "overflow.py"
 
     ```python
     --8<-- "docs/examples/styles/overflow.py"
     ```
 
+=== "overflow.css"
+
+    ```css
+    --8<-- "docs/examples/styles/overflow.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/overflow.py"}

docs/styles/padding.md

@@ -20,6 +20,12 @@ This example adds padding around static text.
     --8<-- "docs/examples/styles/padding.py"
     ```
 
+=== "padding.css"
+
+    ```css
+    --8<-- "docs/examples/styles/padding.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/padding.py"}

docs/styles/scrollbar.md

@@ -21,6 +21,12 @@ In this example we have two panels with different scrollbar colors set for each.
     --8<-- "docs/examples/styles/scrollbars.py"
     ```
 
+=== "scrollbars.css"
+
+    ```css
+    --8<-- "docs/examples/styles/scrollbars.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/scrollbars.py"}

docs/styles/scrollbar_size.md

@@ -14,6 +14,12 @@ In this example we modify the size of the widgets scrollbar to be _much_ larger
     --8<-- "docs/examples/styles/scrollbar_size.py"
     ```
 
+=== "scrollbar_size.css"
+
+    ```css
+    --8<-- "docs/examples/styles/scrollbar_size.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/scrollbar_size.py"}

docs/styles/text_style.md

@@ -22,6 +22,12 @@ Each of the three text panels has a different text style.
     --8<-- "docs/examples/styles/text_style.py"
     ```
 
+=== "text_style.css"
+
+    ```css
+    --8<-- "docs/examples/styles/text_style.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/text_style.py"}

docs/styles/tint.md

@@ -12,6 +12,12 @@ This examples shows a green tint with gradually increasing alpha.
     --8<-- "docs/examples/styles/tint.py"
     ```
 
+=== "tint.css"
+
+    ```css
+    --8<-- "docs/examples/styles/tint.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/tint.py"}

docs/styles/visibility.md

@@ -12,6 +12,12 @@ Note that the second widget is hidden, while leaving a space where it would have
     --8<-- "docs/examples/styles/visibility.py"
     ```
 
+=== "visibility.css"
+
+    ```css
+    --8<-- "docs/examples/styles/visibility.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/visibility.py"}

docs/styles/width.md

@@ -4,12 +4,20 @@ The `width` rule sets a widget's width. By default, it sets the width of the con
 
 ## Example
 
+This example adds a widget with 50% width of the screen.
+
 === "width.py"
 
     ```python
     --8<-- "docs/examples/styles/width.py"
     ```
 
+=== "width.css"
+
+    ```css
+    --8<-- "docs/examples/styles/width.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/width.py"}