Merge branch 'css' into docs-intro

docs/styles/border.md

@@ -3,7 +3,7 @@
 The `border` rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color.
 
 | Border value | Explanation                                             |
-| ------------ | ------------------------------------------------------- |
+| ------------ |---------------------------------------------------------|
 | `"ascii"`    | A border with plus, hyphen, and vertical bar            |
 | `"blank"`    | A blank border (reserves space for a border)            |
 | `"dashed"`   | Dashed line border                                      |

docs/styles/content_align.md

@@ -0,0 +1,65 @@
+# Content-align
+
+The `content-align` property allows you to align content _inside_ a widget.
+
+You can specify the alignment of content on both the horizontal and vertical axes.
+
+## Syntax
+
+```
+content-align: <HORIZONTAL> <VERTICAL>;
+```
+
+### Values
+
+#### `HORIZONTAL`
+
+| Value            | Description                                        |
+|------------------|----------------------------------------------------|
+| `left` (default) | Align content on the left of the horizontal axis   |
+| `center`         | Align content in the center of the horizontal axis |
+| `right`          | Align content on the right of the horizontal axis  |
+
+#### `VERTICAL`
+
+| Value           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `top` (default) | Align content at the top of the vertical axis    |
+| `middle`        | Align content in the middle of the vertical axis |
+| `bottom`        | Align content at the bottom of the vertical axis |
+
+## Example
+
+=== "content_align.py"
+
+    ```python
+    --8<-- "docs/examples/styles/content_align.py"
+    ```
+
+=== "content_align.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/content_align.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/content_align.py"}
+    ```
+
+## CSS
+
+```sass
+/* Align content in the very center of a widget */
+content-align: center middle;
+/* Align content at the top right of a widget */
+content-align: right top;
+```
+
+## Python
+```python
+# Align content in the very center of a widget
+widget.styles.content_align = ("center", "middle")
+# Align content at the top right of a widget
+widget.styles.content_align = ("right", "top")
+```

docs/styles/scrollbar_gutter.md

@@ -0,0 +1,53 @@
+# Scrollbar-gutter
+
+The `scrollbar-gutter` rule allows authors to reserve space for the vertical scrollbar.
+
+Setting the value to `stable` prevents unwanted layout changes when the scrollbar becomes visible.
+
+## Syntax
+
+```
+scrollbar-gutter: [auto|stable];
+```
+
+### Values
+
+| Value            | Description                                      |
+|------------------|--------------------------------------------------|
+| `auto` (default) | No space is reserved for the vertical scrollbar. |
+| `stable`         | Space is reserved for the vertical scrollbar.    |
+
+## Example
+
+In the example below, notice the gap reserved for the scrollbar on the right side of the
+terminal window.
+
+=== "scrollbar_gutter.py"
+
+    ```python
+    --8<-- "docs/examples/styles/scrollbar_gutter.py"
+    ```
+
+=== "scrollbar_gutter.css"
+
+    ```scss
+    --8<-- "docs/examples/styles/scrollbar_gutter.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/scrollbar_gutter.py"}
+    ```
+
+## CSS
+
+```sass
+/* Reserve space for vertical scrollbar */
+scrollbar-gutter: stable;
+```
+
+## Python
+
+```python
+self.styles.scrollbar_gutter = "stable"
+```