Skip to content

Link-style

The link-style style sets the text style for the link text.

Note

link-style only applies to Textual action links as described in the actions guide and not to regular hyperlinks.

Syntax

link-style: <text-style>;

link-style will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.

Defaults

If not provided, a Textual action link will have link-style set to underline.

Example

The example below shows some links with different styles applied to their text. It also shows that link-style does not affect hyperlinks.

LinkStyleApp Visit the Textualize website. Click here for the bell sound. You can also click here for the bell sound. Exit this application. 

from textual.app import App
from textual.widgets import Label


class LinkStyleApp(App):
    CSS_PATH = "link_style.tcss"

    def compose(self):
        yield Label(
            "Visit the [link=https://textualize.io]Textualize[/link] website.",
            id="lbl1",  # (1)!
        )
        yield Label(
            "Click [@click=app.bell]here[/] for the bell sound.",
            id="lbl2",  # (2)!
        )
        yield Label(
            "You can also click [@click=app.bell]here[/] for the bell sound.",
            id="lbl3",  # (3)!
        )
        yield Label(
            "[@click=app.quit]Exit this application.[/]",
            id="lbl4",  # (4)!
        )


if __name__ == "__main__":
    app = LinkStyleApp()
    app.run()
  1. This label has a hyperlink so it won't be affected by the link-style rule.
  2. This label has an "action link" that can be styled with link-style.
  3. This label has an "action link" that can be styled with link-style.
  4. This label has an "action link" that can be styled with link-style.
#lbl1, #lbl2 {
    link-style: bold italic;  /* (1)! */
}

#lbl3 {
    link-style: reverse strike;
}

#lbl4 {
    link-style: bold;
}
  1. This will only affect one of the labels because action links are the only links that this rule affects.

CSS

link-style: bold;
link-style: bold italic reverse;

Python

widget.styles.link_style = "bold"
widget.styles.link_style = "bold italic reverse"

See also