diff --git a/docs/styles/opacity.md b/docs/styles/opacity.md
index 571b74daf..4844f9342 100644
--- a/docs/styles/opacity.md
+++ b/docs/styles/opacity.md
@@ -8,9 +8,10 @@ The `opacity` property sets the opacity/transparency of a widget.
 opacity: <a href="../../css_types/number">&lt;number&gt;</a> | <a href="../../css_types/percentage">&lt;percentage&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
-The opacity of a widget can be set as a [`<number>`](../css_types/number.md) between `0` and `1` or a [`<percentage>`](../css_types/percentage.md) between `0%` and `100%`.
+The opacity of a widget can be set as a [`<number>`](../css_types/number.md)  or a [`<percentage>`](../css_types/percentage.md).
 `0`/`0%` means no opacity, which is equivalent to full transparency.
 Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
+Values outside of these ranges will be clamped.
 
 ### Values
 
diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md
index 5a0e1c6c5..b7b8f63ff 100644
--- a/docs/styles/text_opacity.md
+++ b/docs/styles/text_opacity.md
@@ -4,20 +4,35 @@ The `text-opacity` blends the color of the content of a widget with the color of
 
 ## Syntax
 
-```
-text-opacity: <FRACTIONAL>;
-```
+--8<-- "docs/snippets/syntax_block_start.md"
+text-opacity: <a href="../../css_types/number">&lt;number&gt;</a> | <a href="../../css_types/percentage">&lt;percentage&gt;</a>;
+--8<-- "docs/snippets/syntax_block_end.md"
+
+The text opacity can be set as a [`<number>`](../css_types/number.md) or a [`<percentage>`](../css_types/percentage.md).
+`0`/`0%` means no opacity, which is equivalent to full transparency.
+Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
+Values outside of these ranges will be clamped.
 
 ### Values
 
-As a fractional property, `text-opacity` can be set to either a float (between 0 and 1),
-or a percentage, e.g. `45%`.
-Float values will be clamped between 0 and 1.
-Percentage values will be clamped between 0% and 100%.
+### &lt;number&gt;
+
+--8<-- "docs/snippets/type_syntax/number.md"
+The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
+
+### &lt;percentage&gt;
+
+--8<-- "docs/snippets/type_syntax/percentage.md"
+The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
 
 ## Example
 
-This example shows, from top to bottom, increasing text-opacity values.
+This example shows, from top to bottom, increasing `text-opacity` values.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/text_opacity.py"}
+    ```
 
 === "text_opacity.py"
 
@@ -31,18 +46,11 @@ This example shows, from top to bottom, increasing text-opacity values.
     --8<-- "docs/examples/styles/text_opacity.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/text_opacity.py"}
-    ```
-
 ## CSS
 
 ```sass
 /* Set the text to be "half-faded" against the background of the widget */
-Widget {
-    text-opacity: 50%;
-}
+text-opacity: 50%;
 ```
 
 ## Python