textual/docs/styles/links/index.md

Links

Textual supports the concept of inline "links" embedded in text which trigger an action when pressed.

!!! note

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

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

link-color: <COLOR>;
link-background: <COLOR>;
link-style: <TEXT STYLE> ...;
link-hover-color: <COLOR>;
link-hover-background: <COLOR>;
link-hover-style: <TEXT STYLE> ...;

--8<-- "docs/styles/snippets/color_css_syntax.md"

--8<-- "docs/styles/snippets/text_style_syntax.md"

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 in the Actions guide.