textual/docs/styles/links/index.md

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.

!!! note

These CSS rules only target Textual action links. Internet hyperlinks are not affected by these styles.

Property	Description
link-background	The background color of the link text.
link-color	The color of the link text.
link-hover-background	The background color of the link text when the cursor is over it.
link-hover-color	The color of the link text when the cursor is over it.
link-hover-style	The style of the link text when the cursor is over it.
link-style	The style of the link text (e.g. underline).

Syntax

--8<-- "docs/snippets/syntax_block_start.md" link-background: <color> [<percentage>];

link-color: <color> [<percentage>];

link-style: <text-style>;

link-hover-background: <color> [<percentage>];

link-hover-color: <color> [<percentage>];

link-hover-style: <text-style>; --8<-- "docs/snippets/syntax_block_end.md"

Visit each style's reference page to learn more about how the values are used.

Example

In the example below, the first label illustrates default link styling. The second label 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 in the Actions guide.