From 583b1273acd9da27e3996ecb4d109ceac47dbd8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Fri, 6 Jan 2023 14:18:50 +0000
Subject: [PATCH] Update text style reference.

[skip ci]
---
 docs/styles/text_style.md | 46 ++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/docs/styles/text_style.md b/docs/styles/text_style.md
index b54a1f2aa..815c040ec 100644
--- a/docs/styles/text_style.md
+++ b/docs/styles/text_style.md
@@ -1,29 +1,27 @@
 # Text-style
 
-The `text-style` rule enables a number of different ways of displaying text.
-
-Text styles may be set in combination.
-For example `bold underline` or `reverse underline strike`.
+The `text-style` sets the style for the text in a widget.
 
 ## Syntax
 
-```
-text-style: <TEXT STYLE> ...;
-```
+--8<-- "docs/snippets/syntax_block_start.md"
+text-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
+--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.
 
 ### Values
 
-| Value       | Description                                                    |
-|-------------|----------------------------------------------------------------|
-| `bold`      | **bold text**                                                  |
-| `italic`    | _italic text_                                                  |
-| `reverse`   | reverse video text (foreground and background colors reversed) |
-| `underline` | <u>underline text</u>                                          |
-| `strike`    | <s>strikethrough text</s>                                      |
+--8<-- "docs/snippets/type_syntax/text_style.md"
 
-## Example
+## Examples
 
-Each of the three text panels has a different text style.
+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"
 
@@ -37,9 +35,23 @@ Each of the three text panels has a different text style.
     --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.py"}
+    ```{.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"
+
+    ```css
+    --8<-- "docs/examples/styles/text_style_all.css"
     ```
 
 ## CSS