Styles documentation for links properties

docs/examples/styles/links.css

@@ -0,0 +1,6 @@
+#custom {
+    width: auto;
+    link-color: black 90%;
+    link-background: dodgerblue;
+    link-style: bold underline;
+}

docs/examples/styles/links.py

@@ -0,0 +1,18 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+TEXT = """\
+Here is a [@click='app.bell']link[/] which you can click!
+"""
+
+
+class LinksApp(App):
+    def compose(self) -> ComposeResult:
+        yield Static(TEXT)
+        yield Static(TEXT, id="custom")
+
+
+app = LinksApp(css_path="links.css")
+
+if __name__ == "__main__":
+    app.run()

docs/styles/links.md

@@ -0,0 +1,55 @@
+# Links
+
+Textual supports the concept of inline "links" embedded in text which trigger an action when pressed.
+
+There are a number of styles which influence the appearance of these links within a widget.
+
+| Property                | Description                                                 |
+|-------------------------|-------------------------------------------------------------|
+| `link-color`            | The color of link text.                                     |
+| `link-background`       | The background color of link text.                          |
+| `link-style`            | The style of link text (e.g. underline).                    |
+| `link-hover-color`      | The color of link text with the cursor above it.            |
+| `link-hover-background` | The background color of link text with the cursor above it. |
+| `link-hover-style`      | The style of link text with the cursor above it.            |
+
+## Syntax
+
+```scss
+link-color: <COLOR>;
+link-background: <COLOR>;
+link-style: <TEXT STYLE> ...;
+link-hover-color: <COLOR>;
+link-hover-background: <COLOR>;
+link-hover-style: <TEXT STYLE> ...;
+```
+
+## Example
+
+In the example below, the first `Static` illustrates default link styling.
+The second `Static` uses CSS to customize the link color, background, and style.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/links.py"}
+    ```
+
+=== "links.py"
+
+    ```python
+    --8<-- "docs/examples/styles/links.py"
+    ```
+
+=== "links.css"
+
+    ```sass
+    --8<-- "docs/examples/styles/links.css"
+    ```
+
+## Additional Notes
+
+* Inline links are not widgets, and thus cannot be focused.
+
+## See Also
+
+* An [introduction to links](../guide/actions.md#links) in the Actions guide.

mkdocs.yml

@@ -68,6 +68,7 @@ nav:
     - "styles/layer.md"
     - "styles/layers.md"
     - "styles/layout.md"
+    - "styles/links.md"
     - "styles/margin.md"
     - "styles/max_height.md"
     - "styles/max_width.md"

src/textual/css/constants.py

@@ -32,7 +32,7 @@ VALID_BORDER: Final[set[EdgeType]] = {
     "wide",
 }
 VALID_EDGE: Final = {"top", "right", "bottom", "left"}
-VALID_LAYOUT: Final = {"vertical", "horizontal", "center", "grid"}
+VALID_LAYOUT: Final = {"vertical", "horizontal", "grid"}
 
 VALID_BOX_SIZING: Final = {"border-box", "content-box"}
 VALID_OVERFLOW: Final = {"scroll", "hidden", "auto"}