Files
textual/docs/styles/text_style.md
Rodrigo Girão Serrão 196d430582 Style all Textual CSS as 'sass'
Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.
2023-01-09 11:20:04 +00:00

1.3 KiB

Text-style

The text-style sets the style for the text in a widget.

Syntax

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

text-style will take all the values specified and will apply that styling combination to the text in the widget.

Examples

Each of the three text panels has a different text style, respectively bold, italic, and reverse, from left to right.

=== "Output"

```{.textual path="docs/examples/styles/text_style.py" lines=14}
```

=== "text_style.py"

```python
--8<-- "docs/examples/styles/text_style.py"
```

=== "text_style.css"

```sass
--8<-- "docs/examples/styles/text_style.css"
```

The next example shows all different styles on their own, as well as some combinations of styles in a single widget.

=== "Output"

```{.textual path="docs/examples/styles/text_style_all.py"}
```

=== "text_style_all.py"

```python
--8<-- "docs/examples/styles/text_style_all.py"
```

=== "text_style_all.css"

```sass
--8<-- "docs/examples/styles/text_style_all.css"
```

CSS

text-style: italic;

Python

widget.styles.text_style = "italic"