diff --git a/docs/css_types/_template.md b/docs/css_types/_template.md
index 079f1b7ef0..1e8be15123 100644
--- a/docs/css_types/_template.md
+++ b/docs/css_types/_template.md
@@ -51,7 +51,7 @@ If the type has many different syntaxes, cover all of them.
 Add comments when needed/if helpful.
 -->
 
-```sass
+```css
 .some-class {
     rule: type-value-1;
     rule: type-value-2;
diff --git a/docs/css_types/border.md b/docs/css_types/border.md
index 012bfb598c..00be2f8a98 100644
--- a/docs/css_types/border.md
+++ b/docs/css_types/border.md
@@ -37,7 +37,7 @@ textual borders
 
 ### CSS
 
-```sass
+```css
 #container {
     border: heavy red;
 }
diff --git a/docs/css_types/color.md b/docs/css_types/color.md
index 63b8e31eac..2394603ddb 100644
--- a/docs/css_types/color.md
+++ b/docs/css_types/color.md
@@ -106,7 +106,7 @@ For example, `hsla(128, 100%, 50%, 0.5)` is the color `hsl(128, 100%, 50%)` with
 
 ### CSS
 
-```sass
+```css
 Header {
     background: red;           /* Color name */
 }
diff --git a/docs/css_types/horizontal.md b/docs/css_types/horizontal.md
index ec6d02c5d8..b4783e6e15 100644
--- a/docs/css_types/horizontal.md
+++ b/docs/css_types/horizontal.md
@@ -16,7 +16,7 @@ The [`<horizontal>`](./horizontal.md) type can take any of the following values:
 
 ### CSS
 
-```sass
+```css
 .container {
     align-horizontal: right;
 }
diff --git a/docs/css_types/integer.md b/docs/css_types/integer.md
index 29c8ba2b3d..a4fdb009ec 100644
--- a/docs/css_types/integer.md
+++ b/docs/css_types/integer.md
@@ -14,7 +14,7 @@ An [`<integer>`](./integer.md) is any valid integer number like `-10` or `42`.
 
 ### CSS
 
-```sass
+```css
 .classname {
     offset: 10 -20
 }
diff --git a/docs/css_types/keyline.md b/docs/css_types/keyline.md
index 851812434e..9b84f32ef9 100644
--- a/docs/css_types/keyline.md
+++ b/docs/css_types/keyline.md
@@ -16,7 +16,7 @@ The `<keyline>` CSS type represents a line style used in the [keyline](../styles
 
 ### CSS
 
-```sass
+```css
 Vertical {
     keyline: thin green;
 }
diff --git a/docs/css_types/name.md b/docs/css_types/name.md
index 8a6f064b97..03b2d7a9fc 100644
--- a/docs/css_types/name.md
+++ b/docs/css_types/name.md
@@ -13,7 +13,7 @@ A [`<name>`](./name.md) is any non-empty sequence of characters:
 
 ### CSS
 
-```sass
+```css
 Screen {
     layers: onlyLetters Letters-and-hiphens _lead-under letters-1-digit;
 }
diff --git a/docs/css_types/number.md b/docs/css_types/number.md
index ae3400fcfa..7159a74396 100644
--- a/docs/css_types/number.md
+++ b/docs/css_types/number.md
@@ -10,7 +10,7 @@ A [`<number>`](./number.md) is an [`<integer>`](./integer.md), optionally follow
 
 ### CSS
 
-```sass
+```css
 Grid {
     grid-size: 3 6  /* Integers are numbers */
 }
diff --git a/docs/css_types/overflow.md b/docs/css_types/overflow.md
index cb2cc76362..b5eec3a0d4 100644
--- a/docs/css_types/overflow.md
+++ b/docs/css_types/overflow.md
@@ -16,7 +16,7 @@ The [`<overflow>`](./overflow.md) type can take any of the following values:
 
 ### CSS
 
-```sass
+```css
 #container {
     overflow-y: hidden;  /* Don't overflow */
 }
diff --git a/docs/css_types/percentage.md b/docs/css_types/percentage.md
index aa2586d7dd..b886e880b5 100644
--- a/docs/css_types/percentage.md
+++ b/docs/css_types/percentage.md
@@ -16,7 +16,7 @@ Some rules may clamp the values between `0%` and `100%`.
 
 ### CSS
 
-```sass
+```css
 #footer {
     /* Integer followed by % */
     color: red 70%;
diff --git a/docs/css_types/scalar.md b/docs/css_types/scalar.md
index 89c7dbf5d3..75ba4b4287 100644
--- a/docs/css_types/scalar.md
+++ b/docs/css_types/scalar.md
@@ -98,7 +98,7 @@ For example, if its container is big enough, a label with `width: auto` will be
 
 ### CSS
 
-```sass
+```css
 Horizontal {
     width: 60;     /* 60 cells */
     height: 1fr;   /* proportional size of 1 */
diff --git a/docs/css_types/text_align.md b/docs/css_types/text_align.md
index 0234b952aa..4289f695cb 100644
--- a/docs/css_types/text_align.md
+++ b/docs/css_types/text_align.md
@@ -27,7 +27,7 @@ A [`<text-align>`](./text_align.md) can be any of the following values:
 
 ### CSS
 
-```sass
+```css
 Label {
     text-align: justify;
 }
diff --git a/docs/css_types/text_style.md b/docs/css_types/text_style.md
index 8309502f95..c03e92c067 100644
--- a/docs/css_types/text_style.md
+++ b/docs/css_types/text_style.md
@@ -23,7 +23,7 @@ or any _space-separated_ combination of the following values:
 
 ### CSS
 
-```sass
+```css
 #label1 {
     /* You can specify any value by itself. */
     rule: strike;
diff --git a/docs/css_types/vertical.md b/docs/css_types/vertical.md
index b8ff482037..d1b0ffd6ca 100644
--- a/docs/css_types/vertical.md
+++ b/docs/css_types/vertical.md
@@ -16,7 +16,7 @@ The [`<vertical>`](./vertical.md) type can take any of the following values:
 
 ### CSS
 
-```sass
+```css
 .container {
     align-vertical: top;
 }
diff --git a/docs/guide/CSS.md b/docs/guide/CSS.md
index 9dd18155f1..12c3bc3524 100644
--- a/docs/guide/CSS.md
+++ b/docs/guide/CSS.md
@@ -12,7 +12,7 @@ CSS stands for _Cascading Stylesheet_. A stylesheet is a list of styles and rule
 
 Let's look at some Textual CSS.
 
-```sass
+```css
 Header {
   dock: top;
   height: 3;
@@ -26,7 +26,7 @@ This is an example of a CSS _rule set_. There may be many such sections in any g
 
 Let's break this CSS code down a bit.
 
-```sass hl_lines="1"
+```css hl_lines="1"
 Header {
   dock: top;
   height: 3;
@@ -38,7 +38,7 @@ Header {
 
 The first line is a _selector_ which tells Textual which widget(s) to modify. In the above example, the styles will be applied to a widget defined by the Python class `Header`.
 
-```sass hl_lines="2 3 4 5 6"
+```css hl_lines="2 3 4 5 6"
 Header {
   dock: top;
   height: 3;
@@ -153,7 +153,7 @@ These are used by the CSS to identify parts of the DOM. We will cover these in t
 
 Here's the CSS file we are applying:
 
-```sass title="dom4.tcss"
+```css title="dom4.tcss"
 --8<-- "docs/examples/guide/dom4.tcss"
 ```
 
@@ -206,7 +206,7 @@ class Button(Static):
 
 The following rule applies a border to this widget:
 
-```sass
+```css
 Button {
   border: solid blue;
 }
@@ -214,7 +214,7 @@ Button {
 
 The type selector will also match a widget's base classes. Consequently, a `Static` selector will also style the button because the `Button` Python class extends `Static`.
 
-```sass
+```css
 Static {
   background: blue;
   border: rounded white;
@@ -239,7 +239,7 @@ yield Button(id="next")
 
 You can match an ID with a selector starting with a hash (`#`). Here is how you might draw a red outline around the above button:
 
-```sass
+```css
 #next {
   outline: red;
 }
@@ -267,7 +267,7 @@ yield Button(classes="error disabled")
 
 To match a Widget with a given class in CSS you can precede the class name with a dot (`.`). Here's a rule with a class selector to match the `"success"` class name:
 
-```sass
+```css
 .success {
   background: green;
   color: white;
@@ -280,7 +280,7 @@ To match a Widget with a given class in CSS you can precede the class name with
 
 Class name selectors may be _chained_ together by appending another full stop and class name. The selector will match a widget that has _all_ of the class names set. For instance, the following sets a red background on widgets that have both `error` _and_ `disabled` class names.
 
-```sass
+```css
 .error.disabled {
   background: darkred;
 }
@@ -301,7 +301,7 @@ The _universal_ selector is denoted by an asterisk and will match _all_ widgets.
 
 For example, the following will draw a red outline around all widgets:
 
-```sass
+```css
 * {
   outline: solid red;
 }
@@ -311,7 +311,7 @@ For example, the following will draw a red outline around all widgets:
 
 Pseudo classes can be used to match widgets in a particular state. Pseudo classes are set automatically by Textual. For instance, you might want a button to have a green background when the mouse cursor moves over it. We can do this with the `:hover` pseudo selector.
 
-```sass
+```css
 Button:hover {
   background: green;
 }
@@ -345,7 +345,7 @@ Here's a section of DOM to illustrate this combinator:
 
 Let's say we want to make the text of the buttons in the dialog bold, but we _don't_ want to change the Button in the sidebar. We can do this with the following rule:
 
-```sass hl_lines="1"
+```css hl_lines="1"
 #dialog Button {
   text-style: bold;
 }
@@ -355,7 +355,7 @@ The `#dialog Button` selector matches all buttons that are below the widget with
 
 As with all selectors, you can combine as many as you wish. The following will match a `Button` that is under a `Horizontal` widget _and_ under a widget with an id of `"dialog"`:
 
-```sass
+```css
 #dialog Horizontal Button {
   text-style: bold;
 }
@@ -373,7 +373,7 @@ Let's use this to match the Button in the sidebar given the following DOM:
 
 We can use the following CSS to style all buttons which have a parent with an ID of `sidebar`:
 
-```sass
+```css
 #sidebar > Button {
   text-style: underline;
 }
@@ -399,7 +399,7 @@ The specificity rules are usually enough to fix any conflicts in your stylesheet
 
 Here's an example that makes buttons blue when hovered over with the mouse, regardless of any other selectors that match Buttons:
 
-```sass hl_lines="2"
+```css hl_lines="2"
 Button:hover {
   background: blue !important;
 }
@@ -411,14 +411,14 @@ You can define variables to reduce repetition and encourage consistency in your
 Variables in Textual CSS are prefixed with `$`.
 Here's an example of how you might define a variable called `$border`:
 
-```sass
+```css
 $border: wide green;
 ```
 
 With our variable assigned, we can write `$border` and it will be substituted with `wide green`.
 Consider the following snippet:
 
-```sass
+```css
 #foo {
   border: $border;
 }
@@ -426,7 +426,7 @@ Consider the following snippet:
 
 This will be translated into:
 
-```sass
+```css
 #foo {
   border: wide green;
 }
@@ -451,7 +451,7 @@ All CSS rules support a special value called `initial`, which will reset a value
 Let's look at an example.
 The following will set the background of a button to green:
 
-```sass
+```css
 Button {
   background: green;
 }
@@ -460,7 +460,7 @@ Button {
 If we want a specific button (or buttons) to use the default color, we can set the value to `initial`.
 For instance, if we have a widget with a (CSS) class called `dialog`, we could reset the background color of all buttons inside the dialog with the following CSS:
 
-```sass
+```css
 .dialog Button {
   background: initial;
 }
diff --git a/docs/guide/actions.md b/docs/guide/actions.md
index b69a84871b..ca5ea8b824 100644
--- a/docs/guide/actions.md
+++ b/docs/guide/actions.md
@@ -106,7 +106,7 @@ The following example defines a custom widget with its own `set_background` acti
 
 === "actions05.tcss"
 
-    ```sass title="actions05.tcss"
+    ```css title="actions05.tcss"
     --8<-- "docs/examples/guide/actions/actions05.tcss"
     ```
 
diff --git a/docs/guide/app.md b/docs/guide/app.md
index 648847ec28..c78b8b52a7 100644
--- a/docs/guide/app.md
+++ b/docs/guide/app.md
@@ -262,7 +262,7 @@ The following example enables loading of CSS by adding a `CSS_PATH` class variab
 
 If the path is relative (as it is above) then it is taken as relative to where the app is defined. Hence this example references `"question01.tcss"` in the same directory as the Python code. Here is that CSS file:
 
-```sass title="question02.tcss"
+```css title="question02.tcss"
 --8<-- "docs/examples/app/question02.tcss"
 ```
 
diff --git a/docs/guide/design.md b/docs/guide/design.md
index 0fbd74a21e..36723969f9 100644
--- a/docs/guide/design.md
+++ b/docs/guide/design.md
@@ -16,7 +16,7 @@ Textual pre-defines a number of colors as [CSS variables](../guide/CSS.md#css-va
 
 Here's an example of CSS that uses color variables:
 
-```sass
+```css
 MyWidget {
     background: $primary;
     color: $text;
diff --git a/docs/guide/layout.md b/docs/guide/layout.md
index 3ef77ced7e..8c80a14b00 100644
--- a/docs/guide/layout.md
+++ b/docs/guide/layout.md
@@ -27,7 +27,7 @@ The example below demonstrates how children are arranged inside a container with
 
 === "vertical_layout.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/guide/layout/vertical_layout.tcss"
     ```
 
@@ -92,7 +92,7 @@ The example below shows how we can arrange widgets horizontally, with minimal ch
 
 === "horizontal_layout.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/guide/layout/horizontal_layout.tcss"
     ```
 
@@ -125,7 +125,7 @@ To enable horizontal scrolling, we can use the `overflow-x: auto;` declaration:
 
 === "horizontal_layout_overflow.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/guide/layout/horizontal_layout_overflow.tcss"
     ```
 
@@ -154,7 +154,7 @@ In other words, we have a single row containing two columns.
 
 === "utility_containers.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/guide/layout/utility_containers.tcss"
     ```
 
@@ -193,7 +193,7 @@ Let's update the [utility containers](#utility-containers) example to use the co
 
 === "utility_containers.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/layout/utility_containers.tcss"
     ```
 
@@ -235,7 +235,7 @@ The following example creates a 3 x 2 grid and adds six widgets to it
 
 === "grid_layout1.tcss"
 
-    ```sass hl_lines="2 3"
+    ```css hl_lines="2 3"
     --8<-- "docs/examples/guide/layout/grid_layout1.tcss"
     ```
 
@@ -256,7 +256,7 @@ If we were to yield a seventh widget from our `compose` method, it would not be
 
 === "grid_layout2.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/guide/layout/grid_layout2.tcss"
     ```
 
@@ -288,7 +288,7 @@ We'll make the first column take up half of the screen width, with the other two
 
 === "grid_layout3_row_col_adjust.tcss"
 
-    ```sass hl_lines="4"
+    ```css hl_lines="4"
     --8<-- "docs/examples/guide/layout/grid_layout3_row_col_adjust.tcss"
     ```
 
@@ -317,7 +317,7 @@ and the second row to `75%` height (while retaining the `grid-columns` change fr
 
 === "grid_layout4_row_col_adjust.tcss"
 
-    ```sass hl_lines="5"
+    ```css hl_lines="5"
     --8<-- "docs/examples/guide/layout/grid_layout4_row_col_adjust.tcss"
     ```
 
@@ -345,7 +345,7 @@ Let's modify the previous example to make the first column an `auto` column.
 
 === "grid_layout_auto.tcss"
 
-    ```sass hl_lines="4"
+    ```css hl_lines="4"
     --8<-- "docs/examples/guide/layout/grid_layout_auto.tcss"
     ```
 
@@ -377,7 +377,7 @@ We'll also add a slight tint using `tint: magenta 40%;` to draw attention to it.
 
 === "grid_layout5_col_span.tcss"
 
-    ```sass hl_lines="6-9"
+    ```css hl_lines="6-9"
     --8<-- "docs/examples/guide/layout/grid_layout5_col_span.tcss"
     ```
 
@@ -410,7 +410,7 @@ We again target widget `#two` in our CSS, and add a `row-span: 2;` declaration t
 
 === "grid_layout6_row_span.tcss"
 
-    ```sass hl_lines="8"
+    ```css hl_lines="8"
     --8<-- "docs/examples/guide/layout/grid_layout6_row_span.tcss"
     ```
 
@@ -442,7 +442,7 @@ Now if we add `grid-gutter: 1;` to our grid, one cell of spacing appears between
 
 === "grid_layout7_gutter.tcss"
 
-    ```sass hl_lines="4"
+    ```css hl_lines="4"
     --8<-- "docs/examples/guide/layout/grid_layout7_gutter.tcss"
     ```
 
@@ -482,7 +482,7 @@ The code below shows a simple sidebar implementation.
 
 === "dock_layout1_sidebar.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/guide/layout/dock_layout1_sidebar.tcss"
     ```
 
@@ -506,7 +506,7 @@ This new sidebar is double the width of the one previous one, and has a `deeppin
 
 === "dock_layout2_sidebar.tcss"
 
-    ```sass hl_lines="1-6"
+    ```css hl_lines="1-6"
     --8<-- "docs/examples/guide/layout/dock_layout2_sidebar.tcss"
     ```
 
@@ -530,7 +530,7 @@ We can yield it inside `compose`, and without any additional CSS, we get a heade
 
 === "dock_layout3_sidebar_header.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/layout/dock_layout3_sidebar_header.tcss"
     ```
 
@@ -573,7 +573,7 @@ However, in this case, both `#box1` and `#box2` are assigned to layers which def
 
 === "layers.tcss"
 
-    ```sass hl_lines="3 14 19"
+    ```css hl_lines="3 14 19"
     --8<-- "docs/examples/guide/layout/layers.tcss"
     ```
 
@@ -614,7 +614,7 @@ The example below shows how an advanced layout can be built by combining the var
 
 === "combining_layouts.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/layout/combining_layouts.tcss"
     ```
 
diff --git a/docs/guide/reactivity.md b/docs/guide/reactivity.md
index aa032d3562..c84050ad40 100644
--- a/docs/guide/reactivity.md
+++ b/docs/guide/reactivity.md
@@ -81,7 +81,7 @@ Let's look at an example which illustrates this. In the following app, the value
 
 === "refresh01.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/reactivity/refresh01.tcss"
     ```
 
@@ -125,7 +125,7 @@ The following example modifies "refresh01.py" so that the greeting has an automa
 
 === "refresh02.tcss"
 
-    ```sass hl_lines="7-9"
+    ```css hl_lines="7-9"
     --8<-- "docs/examples/guide/reactivity/refresh02.tcss"
     ```
 
@@ -152,7 +152,7 @@ A common use for this is to restrict numbers to a given range. The following exa
 
 === "validate01.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/reactivity/validate01.tcss"
     ```
 
@@ -185,7 +185,7 @@ The following app will display any color you type in to the input. Try it with a
 
 === "watch01.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/reactivity/watch01.tcss"
     ```
 
@@ -246,7 +246,7 @@ The following example uses a computed attribute. It displays three inputs for ea
 
 === "computed01.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/guide/reactivity/computed01.tcss"
     ```
 
diff --git a/docs/guide/screens.md b/docs/guide/screens.md
index b9aefdc175..e00640971e 100644
--- a/docs/guide/screens.md
+++ b/docs/guide/screens.md
@@ -26,7 +26,7 @@ Let's look at a simple example of writing a screen class to simulate Window's [b
 
 === "screen01.tcss"
 
-    ```sass title="screen01.tcss"
+    ```css title="screen01.tcss"
     --8<-- "docs/examples/guide/screens/screen01.tcss"
     ```
 
@@ -55,7 +55,7 @@ You can also _install_ new named screens dynamically with the [install_screen][t
 
 === "screen02.tcss"
 
-    ```sass title="screen02.tcss"
+    ```css title="screen02.tcss"
     --8<-- "docs/examples/guide/screens/screen02.tcss"
     ```
 
@@ -171,7 +171,7 @@ From the quit screen you can click either Quit to exit the app immediately, or C
 
 === "modal01.tcss"
 
-    ```sass title="modal01.tcss"
+    ```css title="modal01.tcss"
     --8<-- "docs/examples/guide/screens/modal01.tcss"
     ```
 
@@ -213,7 +213,7 @@ Let's see what happens when we use `ModalScreen`.
 
 === "modal01.tcss"
 
-    ```sass title="modal01.tcss"
+    ```css title="modal01.tcss"
     --8<-- "docs/examples/guide/screens/modal01.tcss"
     ```
 
@@ -240,7 +240,7 @@ Let's modify the previous example to use `dismiss` rather than an explicit `pop_
 
 === "modal01.tcss"
 
-    ```sass title="modal01.tcss"
+    ```css title="modal01.tcss"
     --8<-- "docs/examples/guide/screens/modal01.tcss"
     ```
 
diff --git a/docs/guide/widgets.md b/docs/guide/widgets.md
index d8c9e85f6d..d703761caf 100644
--- a/docs/guide/widgets.md
+++ b/docs/guide/widgets.md
@@ -42,7 +42,7 @@ This (very simple) custom widget may be [styled](./styles.md) in the same way as
 
 === "hello02.tcss"
 
-    ```sass title="hello02.tcss"
+    ```css title="hello02.tcss"
     --8<-- "docs/examples/guide/widgets/hello02.tcss"
     ```
 
@@ -65,7 +65,7 @@ Let's use Static to create a widget which cycles through "hello" in various lang
 
 === "hello03.tcss"
 
-    ```sass title="hello03.tcss"
+    ```css title="hello03.tcss"
     --8<-- "docs/examples/guide/widgets/hello03.tcss"
     ```
 
@@ -94,7 +94,7 @@ Here's the Hello example again, this time the widget has embedded default CSS:
 
 === "hello04.tcss"
 
-    ```sass title="hello04.tcss"
+    ```css title="hello04.tcss"
     --8<-- "docs/examples/guide/widgets/hello04.tcss"
     ```
 
@@ -137,7 +137,7 @@ Let's use markup links in the hello example so that the greeting becomes a link
 
 === "hello05.tcss"
 
-    ```sass title="hello05.tcss"
+    ```css title="hello05.tcss"
     --8<-- "docs/examples/guide/widgets/hello05.tcss"
     ```
 
@@ -175,7 +175,7 @@ Let's demonstrate setting a title, both as a class variable and a instance varia
 
 === "hello06.tcss"
 
-    ```sass title="hello06.tcss"
+    ```css title="hello06.tcss"
     --8<-- "docs/examples/guide/widgets/hello06.tcss"
     ```
 
@@ -206,7 +206,7 @@ This app will "play" fizz buzz by displaying a table of the first 15 numbers and
 
 === "fizzbuzz01.tcss"
 
-    ```sass title="fizzbuzz01.tcss" hl_lines="32-35"
+    ```css title="fizzbuzz01.tcss" hl_lines="32-35"
     --8<-- "docs/examples/guide/widgets/fizzbuzz01.tcss"
     ```
 
@@ -230,7 +230,7 @@ Let's modify the default width for the fizzbuzz example. By default, the table w
 
 === "fizzbuzz02.tcss"
 
-    ```sass title="fizzbuzz02.tcss"
+    ```css title="fizzbuzz02.tcss"
     --8<-- "docs/examples/guide/widgets/fizzbuzz02.tcss"
     ```
 
diff --git a/docs/guide/workers.md b/docs/guide/workers.md
index 5de6f3b326..71a06c093e 100644
--- a/docs/guide/workers.md
+++ b/docs/guide/workers.md
@@ -28,7 +28,7 @@ The following app uses [httpx](https://www.python-httpx.org/) to get the current
 
 === "weather.tcss"
 
-    ```sass title="weather.tcss"
+    ```css title="weather.tcss"
     --8<-- "docs/examples/guide/workers/weather.tcss"
     ```
 
diff --git a/docs/snippets/border_sub_title_align_all_example.md b/docs/snippets/border_sub_title_align_all_example.md
index 143aabfe02..4d916ce982 100644
--- a/docs/snippets/border_sub_title_align_all_example.md
+++ b/docs/snippets/border_sub_title_align_all_example.md
@@ -26,7 +26,7 @@ Open the code tabs to see the details of the code examples.
 
 === "border_sub_title_align_all.tcss"
 
-    ```sass hl_lines="12 16 30 34 41 46"
+    ```css hl_lines="12 16 30 34 41 46"
     --8<-- "docs/examples/styles/border_sub_title_align_all.tcss"
     ```
 
diff --git a/docs/snippets/border_title_color.md b/docs/snippets/border_title_color.md
index 36b473c24a..edcc9c5c0d 100644
--- a/docs/snippets/border_title_color.md
+++ b/docs/snippets/border_title_color.md
@@ -13,6 +13,6 @@ The following examples demonstrates customization of the border color and text s
 
 === "border_title_colors.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/border_title_colors.tcss"
     ```
diff --git a/docs/snippets/border_vs_outline_example.md b/docs/snippets/border_vs_outline_example.md
index 55d035f47d..239a4c79a0 100644
--- a/docs/snippets/border_vs_outline_example.md
+++ b/docs/snippets/border_vs_outline_example.md
@@ -16,6 +16,6 @@ This example also shows that a widget cannot contain both a `border` and an `out
 
 === "outline_vs_border.tcss"
 
-    ```sass hl_lines="5-7 9-11"
+    ```css hl_lines="5-7 9-11"
     --8<-- "docs/examples/styles/outline_vs_border.tcss"
     ```
diff --git a/docs/styles/_template.md b/docs/styles/_template.md
index 5cddb8919c..b08423bb3b 100644
--- a/docs/styles/_template.md
+++ b/docs/styles/_template.md
@@ -46,7 +46,7 @@ Short description of the first example.
 
 === "style.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/style.tcss"
     ```
 -->
@@ -68,7 +68,7 @@ Short description of the second example.
 
 === "style.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/style.tcss"
     ```
 
@@ -84,7 +84,7 @@ Include comments when relevant.
 Include all variations.
 List all values, if possible and sensible.
 
-```sass
+```css
 rule-name: value1
 rule-name: value2
 rule-name: different-syntax-value shown-here
diff --git a/docs/styles/align.md b/docs/styles/align.md
index 810e26303a..72da641027 100644
--- a/docs/styles/align.md
+++ b/docs/styles/align.md
@@ -34,7 +34,7 @@ This example contains a simple app with two labels centered on the screen with `
 
 === "align.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/align.tcss"
     ```
 
@@ -56,13 +56,13 @@ Each label has been aligned differently inside its container, and its text shows
 
 === "align_all.tcss"
 
-    ```sass hl_lines="2 6 10 14 18 22 26 30 34"
+    ```css hl_lines="2 6 10 14 18 22 26 30 34"
     --8<-- "docs/examples/styles/align_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Align child widgets to the center. */
 align: center middle;
 /* Align child widget to the top right */
diff --git a/docs/styles/background.md b/docs/styles/background.md
index 9a1c4f04f2..420d08eae8 100644
--- a/docs/styles/background.md
+++ b/docs/styles/background.md
@@ -29,7 +29,7 @@ This example creates three widgets and applies a different background to each.
 
 === "background.tcss"
 
-    ```sass hl_lines="9 13 17"
+    ```css hl_lines="9 13 17"
     --8<-- "docs/examples/styles/background.tcss"
     ```
 
@@ -50,13 +50,13 @@ The next example creates ten widgets laid out side by side to show the effect of
 
 === "background_transparency.tcss"
 
-    ```sass hl_lines="2 6 10 14 18 22 26 30 34 38"
+    ```css hl_lines="2 6 10 14 18 22 26 30 34 38"
     --8<-- "docs/examples/styles/background_transparency.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Blue background */
 background: blue;
 
diff --git a/docs/styles/border.md b/docs/styles/border.md
index 9d7acfacc9..eb3e4991df 100644
--- a/docs/styles/border.md
+++ b/docs/styles/border.md
@@ -53,7 +53,7 @@ This examples shows three widgets with different border styles.
 
 === "border.tcss"
 
-    ```sass hl_lines="4 10 16"
+    ```css hl_lines="4 10 16"
     --8<-- "docs/examples/styles/border.tcss"
     ```
 
@@ -74,7 +74,7 @@ The next example shows a grid with all the available border types.
 
 === "border_all.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/border_all.tcss"
     ```
 
@@ -84,7 +84,7 @@ The next example shows a grid with all the available border types.
 
 ## CSS
 
-```sass
+```css
 /* Set a heavy white border */
 border: heavy white;
 
diff --git a/docs/styles/border_subtitle_align.md b/docs/styles/border_subtitle_align.md
index 7723062cdb..6484d277f6 100644
--- a/docs/styles/border_subtitle_align.md
+++ b/docs/styles/border_subtitle_align.md
@@ -35,7 +35,7 @@ This example shows three labels, each with a different border subtitle alignment
 
 === "border_subtitle_align.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/border_subtitle_align.tcss"
     ```
 
@@ -47,7 +47,7 @@ This example shows three labels, each with a different border subtitle alignment
 
 ## CSS
 
-```sass
+```css
 border-subtitle-align: left;
 border-subtitle-align: center;
 border-subtitle-align: right;
diff --git a/docs/styles/border_subtitle_background.md b/docs/styles/border_subtitle_background.md
index 8d60b3e150..21a407c67e 100644
--- a/docs/styles/border_subtitle_background.md
+++ b/docs/styles/border_subtitle_background.md
@@ -18,7 +18,7 @@ border-subtitle-background: (<a href="../../css_types/color">&lt;color&gt;</a> |
 
 ## CSS
 
-```sass
+```css
 border-subtitle-background: blue;
 ```
 
diff --git a/docs/styles/border_subtitle_color.md b/docs/styles/border_subtitle_color.md
index 3880111595..0629896ea3 100644
--- a/docs/styles/border_subtitle_color.md
+++ b/docs/styles/border_subtitle_color.md
@@ -17,7 +17,7 @@ border-subtitle-color: (<a href="../../css_types/color">&lt;color&gt;</a> | auto
 
 ## CSS
 
-```sass
+```css
 border-subtitle-color: red;
 ```
 
diff --git a/docs/styles/border_subtitle_style.md b/docs/styles/border_subtitle_style.md
index 3b826568f8..0c8c16afb2 100644
--- a/docs/styles/border_subtitle_style.md
+++ b/docs/styles/border_subtitle_style.md
@@ -17,7 +17,7 @@ border-subtitle-style: <a href="../../css_types/text_style">&lt;text-style&gt;</
 
 ## CSS
 
-```sass
+```css
 border-subtitle-style: bold underline;
 ```
 
diff --git a/docs/styles/border_title_align.md b/docs/styles/border_title_align.md
index f2d9a61f9f..b30efcab2b 100644
--- a/docs/styles/border_title_align.md
+++ b/docs/styles/border_title_align.md
@@ -35,7 +35,7 @@ This example shows three labels, each with a different border title alignment:
 
 === "border_title_align.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/border_title_align.tcss"
     ```
 
@@ -47,7 +47,7 @@ This example shows three labels, each with a different border title alignment:
 
 ## CSS
 
-```sass
+```css
 border-title-align: left;
 border-title-align: center;
 border-title-align: right;
diff --git a/docs/styles/border_title_background.md b/docs/styles/border_title_background.md
index 19d33e578f..9067db1f66 100644
--- a/docs/styles/border_title_background.md
+++ b/docs/styles/border_title_background.md
@@ -17,7 +17,7 @@ border-title-background: (<a href="../../css_types/color">&lt;color&gt;</a> | au
 
 ## CSS
 
-```sass
+```css
 border-title-background: blue;
 ```
 
diff --git a/docs/styles/border_title_color.md b/docs/styles/border_title_color.md
index 2272de9c6f..5831295984 100644
--- a/docs/styles/border_title_color.md
+++ b/docs/styles/border_title_color.md
@@ -15,7 +15,7 @@ border-title-color: (<a href="../../css_types/color">&lt;color&gt;</a> | auto) [
 
 ## CSS
 
-```sass
+```css
 border-title-color: red;
 ```
 
diff --git a/docs/styles/border_title_style.md b/docs/styles/border_title_style.md
index 09e8319cca..7d16fce9ba 100644
--- a/docs/styles/border_title_style.md
+++ b/docs/styles/border_title_style.md
@@ -18,7 +18,7 @@ border-title-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 
 ## CSS
 
-```sass
+```css
 border-title-style: bold underline;
 ```
 
diff --git a/docs/styles/box_sizing.md b/docs/styles/box_sizing.md
index 147929f8ba..b2fe4bf52f 100644
--- a/docs/styles/box_sizing.md
+++ b/docs/styles/box_sizing.md
@@ -34,13 +34,13 @@ The bottom widget has `box-sizing: content-box` which increases the size of the
 
 === "box_sizing.tcss"
 
-    ```sass hl_lines="2 6"
+    ```css hl_lines="2 6"
     --8<-- "docs/examples/styles/box_sizing.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set box sizing to border-box (default) */
 box-sizing: border-box;
 
diff --git a/docs/styles/color.md b/docs/styles/color.md
index 49b55dbb00..3a1f18c8b7 100644
--- a/docs/styles/color.md
+++ b/docs/styles/color.md
@@ -31,7 +31,7 @@ This example sets a different text color for each of three different widgets.
 
 === "color.tcss"
 
-    ```sass hl_lines="8 12 16"
+    ```css hl_lines="8 12 16"
     --8<-- "docs/examples/styles/color.tcss"
     ```
 
@@ -52,13 +52,13 @@ The next example shows how `auto` chooses between a lighter or a darker text col
 
 === "color_auto.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/color_auto.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Blue text */
 color: blue;
 
diff --git a/docs/styles/content_align.md b/docs/styles/content_align.md
index 63d0ba298f..88a10ea6f7 100644
--- a/docs/styles/content_align.md
+++ b/docs/styles/content_align.md
@@ -39,7 +39,7 @@ This first example shows three labels stacked vertically, each with different co
 
 === "content_align.tcss"
 
-    ```sass hl_lines="2 7-8 13"
+    ```css hl_lines="2 7-8 13"
     --8<-- "docs/examples/styles/content_align.tcss"
     ```
 
@@ -61,13 +61,13 @@ Each label has its text aligned differently.
 
 === "content_align_all.tcss"
 
-    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
+    ```css hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/content_align_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Align content in the very center of a widget */
 content-align: center middle;
 /* Align content at the top right of a widget */
diff --git a/docs/styles/display.md b/docs/styles/display.md
index 6a40dfcb54..c2fe31fc81 100644
--- a/docs/styles/display.md
+++ b/docs/styles/display.md
@@ -32,13 +32,13 @@ Note that the second widget is hidden by adding the `"remove"` class which sets
 
 === "display.tcss"
 
-    ```sass hl_lines="13"
+    ```css hl_lines="13"
     --8<-- "docs/examples/styles/display.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Widget is shown */
 display: block;
 
diff --git a/docs/styles/dock.md b/docs/styles/dock.md
index 25464c5f7b..00cb0e4195 100644
--- a/docs/styles/dock.md
+++ b/docs/styles/dock.md
@@ -30,7 +30,7 @@ Notice that even though the content is scrolled, the sidebar remains fixed.
 
 === "dock_layout1_sidebar.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/guide/layout/dock_layout1_sidebar.tcss"
     ```
 
@@ -52,13 +52,13 @@ The labels will remain in that position (docked) even if the container they are
 
 === "dock_all.tcss"
 
-    ```sass hl_lines="2-5 8-11 14-17 20-23"
+    ```css hl_lines="2-5 8-11 14-17 20-23"
     --8<-- "docs/examples/styles/dock_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 dock: bottom;  /* Docks on the bottom edge of the parent container. */
 dock: left;    /* Docks on the   left edge of the parent container. */
 dock: right;   /* Docks on the  right edge of the parent container. */
diff --git a/docs/styles/grid/column_span.md b/docs/styles/grid/column_span.md
index d712edb835..3ed7af7c3b 100644
--- a/docs/styles/grid/column_span.md
+++ b/docs/styles/grid/column_span.md
@@ -31,13 +31,13 @@ The example below shows a 4 by 4 grid where many placeholders span over several
 
 === "column_span.tcss"
 
-    ```sass hl_lines="2 5 8 11 14 20"
+    ```css hl_lines="2 5 8 11 14 20"
     --8<-- "docs/examples/styles/column_span.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 column-span: 3;
 ```
 
diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md
index 89b589c6d6..47e31b849e 100644
--- a/docs/styles/grid/grid_columns.md
+++ b/docs/styles/grid/grid_columns.md
@@ -42,13 +42,13 @@ Because there are more rows than scalars in the style definition, the scalars wi
 
 === "grid_columns.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/grid_columns.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set all columns to have 50% width */
 grid-columns: 50%;
 
diff --git a/docs/styles/grid/grid_gutter.md b/docs/styles/grid/grid_gutter.md
index 39e8981c55..21264848af 100644
--- a/docs/styles/grid/grid_gutter.md
+++ b/docs/styles/grid/grid_gutter.md
@@ -37,7 +37,7 @@ The example below employs a common trick to apply visually consistent spacing ar
 
 === "grid_gutter.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/grid_gutter.tcss"
     ```
 
@@ -45,7 +45,7 @@ The example below employs a common trick to apply visually consistent spacing ar
 
 ## CSS
 
-```sass
+```css
 /* Set vertical and horizontal gutters to be the same */
 grid-gutter: 5;
 
diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md
index 816ce708ef..c76cfda56f 100644
--- a/docs/styles/grid/grid_rows.md
+++ b/docs/styles/grid/grid_rows.md
@@ -42,13 +42,13 @@ Because there are more rows than scalars in the style definition, the scalars wi
 
 === "grid_rows.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/grid_rows.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set all rows to have 50% height */
 grid-rows: 50%;
 
diff --git a/docs/styles/grid/grid_size.md b/docs/styles/grid/grid_size.md
index b225b858fc..33c6a67b4e 100644
--- a/docs/styles/grid/grid_size.md
+++ b/docs/styles/grid/grid_size.md
@@ -37,7 +37,7 @@ In the first example, we create a grid with 2 columns and 5 rows, although we do
 
 === "grid_size_both.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/grid_size_both.tcss"
     ```
 
@@ -60,7 +60,7 @@ In the second example, we create a grid with 2 columns and however many rows are
 
 === "grid_size_columns.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/grid_size_columns.tcss"
     ```
 
@@ -68,7 +68,7 @@ In the second example, we create a grid with 2 columns and however many rows are
 
 ## CSS
 
-```sass
+```css
 /* Grid with 3 rows and 5 columns */
 grid-size: 3 5;
 
diff --git a/docs/styles/grid/index.md b/docs/styles/grid/index.md
index 012365e00e..23a0a6ae84 100644
--- a/docs/styles/grid/index.md
+++ b/docs/styles/grid/index.md
@@ -51,7 +51,7 @@ The spacing between grid cells is defined by the `grid-gutter` style.
 
 === "grid.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/grid.tcss"
     ```
 
diff --git a/docs/styles/grid/row_span.md b/docs/styles/grid/row_span.md
index 145015e434..9b9dd0da58 100644
--- a/docs/styles/grid/row_span.md
+++ b/docs/styles/grid/row_span.md
@@ -34,13 +34,13 @@ After placing the placeholders `#p1`, `#p2`, `#p3`, and `#p4`, the next availabl
 
 === "row_span.tcss"
 
-    ```sass hl_lines="2 5 8 11 14 17 20"
+    ```css hl_lines="2 5 8 11 14 17 20"
     --8<-- "docs/examples/styles/row_span.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 row-span: 3
 ```
 
diff --git a/docs/styles/height.md b/docs/styles/height.md
index 7680d84e0d..7fe8d17158 100644
--- a/docs/styles/height.md
+++ b/docs/styles/height.md
@@ -30,7 +30,7 @@ This examples creates a widget with a height of 50% of the screen.
 
 === "height.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/height.tcss"
     ```
 
@@ -55,7 +55,7 @@ Open the CSS file tab to see the comments that explain how each height is comput
 
 === "height_comparison.tcss"
 
-    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
+    ```css hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/height_comparison.tcss"
     ```
 
@@ -73,7 +73,7 @@ Open the CSS file tab to see the comments that explain how each height is comput
 
 ## CSS
 
-```sass
+```css
 /* Explicit cell height */
 height: 10;
 
diff --git a/docs/styles/keyline.md b/docs/styles/keyline.md
index 04a306a50e..77c2f43ed5 100644
--- a/docs/styles/keyline.md
+++ b/docs/styles/keyline.md
@@ -33,7 +33,7 @@ The following examples shows a simple horizontal layout with a thin keyline.
 
 === "keyline.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/keyline_horizontal.tcss"
     ```
 
@@ -56,14 +56,14 @@ The following examples shows a grid layout with a *heavy* keyline.
 
 === "keyline.tcss"
 
-    ```sass 
+    ```css 
     --8<-- "docs/examples/styles/keyline.tcss"
     ```
 
 
 ## CSS
 
-```sass
+```css
 /* Set a thin green keyline */
 /* Note: Must be set on a container or a widget with a layout. */
 keyline: thin green;
diff --git a/docs/styles/layer.md b/docs/styles/layer.md
index d1504dd592..bdb56b9be6 100644
--- a/docs/styles/layer.md
+++ b/docs/styles/layer.md
@@ -37,13 +37,13 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
 
 === "layers.tcss"
 
-    ```sass hl_lines="3 14 19"
+    ```css hl_lines="3 14 19"
     --8<-- "docs/examples/guide/layout/layers.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Draw the widget on the layer called 'below' */
 layer: below;
 ```
diff --git a/docs/styles/layers.md b/docs/styles/layers.md
index 685b5659cf..c31f1f5d36 100644
--- a/docs/styles/layers.md
+++ b/docs/styles/layers.md
@@ -35,13 +35,13 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
 
 === "layers.tcss"
 
-    ```sass hl_lines="3 14 19"
+    ```css hl_lines="3 14 19"
     --8<-- "docs/examples/guide/layout/layers.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Bottom layer is called 'below', layer above it is called 'above' */
 layers: below above;
 ```
diff --git a/docs/styles/layout.md b/docs/styles/layout.md
index e0eeb5901b..590ea3ec5d 100644
--- a/docs/styles/layout.md
+++ b/docs/styles/layout.md
@@ -38,13 +38,13 @@ To learn more about the grid layout, you can see the [layout guide](../guide/lay
 
 === "layout.tcss"
 
-    ```sass hl_lines="2 8"
+    ```css hl_lines="2 8"
     --8<-- "docs/examples/styles/layout.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 layout: horizontal;
 ```
 
diff --git a/docs/styles/links/index.md b/docs/styles/links/index.md
index b76d8029d1..87070a5ba0 100644
--- a/docs/styles/links/index.md
+++ b/docs/styles/links/index.md
@@ -52,7 +52,7 @@ The second label uses CSS to customize the link color, background, and style.
 
 === "links.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/links.tcss"
     ```
 
diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md
index 6dccd7bee8..c6cbdc3ad3 100644
--- a/docs/styles/links/link_background.md
+++ b/docs/styles/links/link_background.md
@@ -37,7 +37,7 @@ It also shows that `link-background` does not affect hyperlinks.
 
 === "link_background.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_background.tcss"
     ```
 
@@ -45,7 +45,7 @@ It also shows that `link-background` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-background: red 70%;
 link-background: $accent;
 ```
diff --git a/docs/styles/links/link_background_hover.md b/docs/styles/links/link_background_hover.md
index ad8579b6a6..2d8fbe463e 100644
--- a/docs/styles/links/link_background_hover.md
+++ b/docs/styles/links/link_background_hover.md
@@ -46,7 +46,7 @@ It also shows that `link-background-hover` does not affect hyperlinks.
 
 === "link_background_hover.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_background_hover.tcss"
     ```
 
@@ -55,7 +55,7 @@ It also shows that `link-background-hover` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-background-hover: red 70%;
 link-background-hover: $accent;
 ```
diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md
index 3d7107bcaa..8d25fdd16d 100644
--- a/docs/styles/links/link_color.md
+++ b/docs/styles/links/link_color.md
@@ -37,7 +37,7 @@ It also shows that `link-color` does not affect hyperlinks.
 
 === "link_color.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_color.tcss"
     ```
 
@@ -45,7 +45,7 @@ It also shows that `link-color` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-color: red 70%;
 link-color: $accent;
 ```
diff --git a/docs/styles/links/link_color_hover.md b/docs/styles/links/link_color_hover.md
index 102f041b8c..adb2fa78c2 100644
--- a/docs/styles/links/link_color_hover.md
+++ b/docs/styles/links/link_color_hover.md
@@ -50,7 +50,7 @@ It also shows that `link-color-hover` does not affect hyperlinks.
 
 === "link_color_hover.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_color_hover.tcss"
     ```
 
@@ -58,7 +58,7 @@ It also shows that `link-color-hover` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-color-hover: red 70%;
 link-color-hover: black;
 ```
diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md
index 8478b6032c..dce4153fbe 100644
--- a/docs/styles/links/link_style.md
+++ b/docs/styles/links/link_style.md
@@ -41,7 +41,7 @@ It also shows that `link-style` does not affect hyperlinks.
 
 === "link_style.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_style.tcss"
     ```
 
@@ -49,7 +49,7 @@ It also shows that `link-style` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-style: bold;
 link-style: bold italic reverse;
 ```
diff --git a/docs/styles/links/link_style_hover.md b/docs/styles/links/link_style_hover.md
index d32d52df71..5598994f0f 100644
--- a/docs/styles/links/link_style_hover.md
+++ b/docs/styles/links/link_style_hover.md
@@ -50,7 +50,7 @@ It also shows that `link-style-hover` does not affect hyperlinks.
 
 === "link_style_hover.tcss"
 
-    ```sass hl_lines="2 6 10"
+    ```css hl_lines="2 6 10"
     --8<-- "docs/examples/styles/link_style_hover.tcss"
     ```
 
@@ -59,7 +59,7 @@ It also shows that `link-style-hover` does not affect hyperlinks.
 
 ## CSS
 
-```sass
+```css
 link-style-hover: bold;
 link-style-hover: bold italic reverse;
 ```
diff --git a/docs/styles/margin.md b/docs/styles/margin.md
index a8f47832ea..e6b4b8b63e 100644
--- a/docs/styles/margin.md
+++ b/docs/styles/margin.md
@@ -51,7 +51,7 @@ In the example below we add a large margin to a label, which makes it move away
 
 === "margin.tcss"
 
-    ```sass hl_lines="7"
+    ```css hl_lines="7"
     --8<-- "docs/examples/styles/margin.tcss"
     ```
 
@@ -73,13 +73,13 @@ In each cell, we have a placeholder that has its margins set in different ways.
 
 === "margin_all.tcss"
 
-    ```sass hl_lines="25 29 33 37 41 45 49 53"
+    ```css hl_lines="25 29 33 37 41 45 49 53"
     --8<-- "docs/examples/styles/margin_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set margin of 1 around all edges */
 margin: 1;
 /* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
diff --git a/docs/styles/max_height.md b/docs/styles/max_height.md
index d23faa9bab..a90c7888c3 100644
--- a/docs/styles/max_height.md
+++ b/docs/styles/max_height.md
@@ -29,7 +29,7 @@ Then, we set `max-height` individually on each placeholder.
 
 === "max_height.tcss"
 
-    ```sass hl_lines="12 16 20 24"
+    ```css hl_lines="12 16 20 24"
     --8<-- "docs/examples/styles/max_height.tcss"
     ```
 
@@ -37,7 +37,7 @@ Then, we set `max-height` individually on each placeholder.
 
 ## CSS
 
-```sass
+```css
 /* Set the maximum height to 10 rows */
 max-height: 10;
 
diff --git a/docs/styles/max_width.md b/docs/styles/max_width.md
index 5d4596ad05..6c6e6b908a 100644
--- a/docs/styles/max_width.md
+++ b/docs/styles/max_width.md
@@ -29,7 +29,7 @@ Then, we set `max-width` individually on each placeholder.
 
 === "max_width.tcss"
 
-    ```sass hl_lines="12 16 20 24"
+    ```css hl_lines="12 16 20 24"
     --8<-- "docs/examples/styles/max_width.tcss"
     ```
 
@@ -37,7 +37,7 @@ Then, we set `max-width` individually on each placeholder.
 
 ## CSS
 
-```sass
+```css
 /* Set the maximum width to 10 rows */
 max-width: 10;
 
diff --git a/docs/styles/min_height.md b/docs/styles/min_height.md
index 6c23958cc1..9c98083a4a 100644
--- a/docs/styles/min_height.md
+++ b/docs/styles/min_height.md
@@ -29,7 +29,7 @@ Then, we set `min-height` individually on each placeholder.
 
 === "min_height.tcss"
 
-    ```sass hl_lines="13 17 21 25"
+    ```css hl_lines="13 17 21 25"
     --8<-- "docs/examples/styles/min_height.tcss"
     ```
 
@@ -37,7 +37,7 @@ Then, we set `min-height` individually on each placeholder.
 
 ## CSS
 
-```sass
+```css
 /* Set the minimum height to 10 rows */
 min-height: 10;
 
diff --git a/docs/styles/min_width.md b/docs/styles/min_width.md
index a8771fc0b3..1c08ee35c3 100644
--- a/docs/styles/min_width.md
+++ b/docs/styles/min_width.md
@@ -29,7 +29,7 @@ Then, we set `min-width` individually on each placeholder.
 
 === "min_width.tcss"
 
-    ```sass hl_lines="13 17 21 25"
+    ```css hl_lines="13 17 21 25"
     --8<-- "docs/examples/styles/min_width.tcss"
     ```
 
@@ -37,7 +37,7 @@ Then, we set `min-width` individually on each placeholder.
 
 ## CSS
 
-```sass
+```css
 /* Set the minimum width to 10 rows */
 min-width: 10;
 
diff --git a/docs/styles/offset.md b/docs/styles/offset.md
index 47c836166b..eee43e81be 100644
--- a/docs/styles/offset.md
+++ b/docs/styles/offset.md
@@ -32,13 +32,13 @@ In this example, we have 3 widgets with differing offsets.
 
 === "offset.tcss"
 
-    ```sass hl_lines="13 20 27"
+    ```css hl_lines="13 20 27"
     --8<-- "docs/examples/styles/offset.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Move the widget 8 cells in the x direction and 2 in the y direction */
 offset: 8 2;
 
diff --git a/docs/styles/opacity.md b/docs/styles/opacity.md
index 69b657401e..b5e6a8b2a1 100644
--- a/docs/styles/opacity.md
+++ b/docs/styles/opacity.md
@@ -36,13 +36,13 @@ When the opacity is zero, all we see is the (black) background.
 
 === "opacity.tcss"
 
-    ```sass hl_lines="2 6 10 14 18"
+    ```css hl_lines="2 6 10 14 18"
     --8<-- "docs/examples/styles/opacity.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Fade the widget to 50% against its parent's background */
 opacity: 50%;
 ```
diff --git a/docs/styles/outline.md b/docs/styles/outline.md
index b3fb75ff2a..66e760bf96 100644
--- a/docs/styles/outline.md
+++ b/docs/styles/outline.md
@@ -50,7 +50,7 @@ Note how the outline occludes the text area.
 
 === "outline.tcss"
 
-    ```sass hl_lines="8"
+    ```css hl_lines="8"
     --8<-- "docs/examples/styles/outline.tcss"
     ```
 
@@ -71,7 +71,7 @@ The next example shows a grid with all the available outline types.
 
 === "outline_all.tcss"
 
-    ```sass hl_lines="2 6 10 14 18 22 26 30 34 38 42 46 50 54 58"
+    ```css hl_lines="2 6 10 14 18 22 26 30 34 38 42 46 50 54 58"
     --8<-- "docs/examples/styles/outline_all.tcss"
     ```
 
@@ -81,7 +81,7 @@ The next example shows a grid with all the available outline types.
 
 ## CSS
 
-```sass
+```css
 /* Set a heavy white outline */
 outline:heavy white;
 
diff --git a/docs/styles/overflow.md b/docs/styles/overflow.md
index d4807ae4dd..caf3b9ccdc 100644
--- a/docs/styles/overflow.md
+++ b/docs/styles/overflow.md
@@ -47,13 +47,13 @@ The right side has `overflow-y: hidden` which will prevent a scrollbar from bein
 
 === "overflow.tcss"
 
-    ```sass hl_lines="19"
+    ```css hl_lines="19"
     --8<-- "docs/examples/styles/overflow.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Automatic scrollbars on both axes (the default) */
 overflow: auto auto;
 
diff --git a/docs/styles/padding.md b/docs/styles/padding.md
index a26d767b9a..ca34e84a79 100644
--- a/docs/styles/padding.md
+++ b/docs/styles/padding.md
@@ -50,7 +50,7 @@ This example adds padding around some text.
 
 === "padding.tcss"
 
-    ```sass hl_lines="7"
+    ```css hl_lines="7"
     --8<-- "docs/examples/styles/padding.tcss"
     ```
 
@@ -73,13 +73,13 @@ The effect of each padding setting is noticeable in the colored background aroun
 
 === "padding_all.tcss"
 
-    ```sass hl_lines="16 20 24 28 32 36 40 44"
+    ```css hl_lines="16 20 24 28 32 36 40 44"
     --8<-- "docs/examples/styles/padding_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set padding of 1 around all edges */
 padding: 1;
 /* Set padding of 2 on the top and bottom edges, and 4 on the left and right */
diff --git a/docs/styles/scrollbar_colors/index.md b/docs/styles/scrollbar_colors/index.md
index c0ef25a37e..1ee1b04de0 100644
--- a/docs/styles/scrollbar_colors/index.md
+++ b/docs/styles/scrollbar_colors/index.md
@@ -51,6 +51,6 @@ The right panel sets `scrollbar-background`, `scrollbar-color`, and `scrollbar-c
 
 === "scrollbars.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/scrollbars.tcss"
     ```
diff --git a/docs/styles/scrollbar_colors/scrollbar_background.md b/docs/styles/scrollbar_colors/scrollbar_background.md
index 5dff38c3e1..443bf84189 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background.md
@@ -28,13 +28,13 @@ The `scrollbar-background` style sets the background color of the scrollbar.
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-backround: blue;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_background_active.md b/docs/styles/scrollbar_colors/scrollbar_background_active.md
index 41e687f582..f54e9e6e3b 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background_active.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background_active.md
@@ -29,13 +29,13 @@ The `scrollbar-background-active` style sets the background color of the scrollb
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-backround-active: red;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_background_hover.md b/docs/styles/scrollbar_colors/scrollbar_background_hover.md
index caaa552a10..b02d8b25ef 100644
--- a/docs/styles/scrollbar_colors/scrollbar_background_hover.md
+++ b/docs/styles/scrollbar_colors/scrollbar_background_hover.md
@@ -29,13 +29,13 @@ The `scrollbar-background-hover` style sets the background color of the scrollba
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="4"
+    ```css hl_lines="4"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-background-hover: purple;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color.md b/docs/styles/scrollbar_colors/scrollbar_color.md
index dac2d0daa7..f5c2ea9d95 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color.md
@@ -29,13 +29,13 @@ The `scrollbar-color` style sets the color of the scrollbar.
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="5"
+    ```css hl_lines="5"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-color: cyan;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color_active.md b/docs/styles/scrollbar_colors/scrollbar_color_active.md
index 34ffeff813..3e373e303d 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color_active.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color_active.md
@@ -29,13 +29,13 @@ The `scrollbar-color-active` style sets the color of the scrollbar when the thum
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="6"
+    ```css hl_lines="6"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-color-active: yellow;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_color_hover.md b/docs/styles/scrollbar_colors/scrollbar_color_hover.md
index 25e06b436e..fb88b47acf 100644
--- a/docs/styles/scrollbar_colors/scrollbar_color_hover.md
+++ b/docs/styles/scrollbar_colors/scrollbar_color_hover.md
@@ -29,13 +29,13 @@ The `scrollbar-color-hover` style sets the color of the scrollbar when the curso
 
 === "scrollbars2.tcss"
 
-    ```sass hl_lines="7"
+    ```css hl_lines="7"
     --8<-- "docs/examples/styles/scrollbars2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-color-hover: pink;
 ```
 
diff --git a/docs/styles/scrollbar_colors/scrollbar_corner_color.md b/docs/styles/scrollbar_colors/scrollbar_corner_color.md
index 7482cd62a1..8c2c9c3140 100644
--- a/docs/styles/scrollbar_colors/scrollbar_corner_color.md
+++ b/docs/styles/scrollbar_colors/scrollbar_corner_color.md
@@ -27,13 +27,13 @@ The example below sets the scrollbar corner (bottom-right corner of the screen)
 
 === "scrollbar_corner_color.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/scrollbar_corner_color.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-corner-color: white;
 ```
 
diff --git a/docs/styles/scrollbar_gutter.md b/docs/styles/scrollbar_gutter.md
index 1666f8a03a..22cd8069c7 100644
--- a/docs/styles/scrollbar_gutter.md
+++ b/docs/styles/scrollbar_gutter.md
@@ -35,13 +35,13 @@ terminal window.
 
 === "scrollbar_gutter.tcss"
 
-    ```sass hl_lines="2"
+    ```css hl_lines="2"
     --8<-- "docs/examples/styles/scrollbar_gutter.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 scrollbar-gutter: auto;    /* Don't reserve space for a vertical scrollbar. */
 scrollbar-gutter: stable;  /* Reserve space for a vertical scrollbar. */
 ```
diff --git a/docs/styles/scrollbar_size.md b/docs/styles/scrollbar_size.md
index 6ff8384c80..25281214bd 100644
--- a/docs/styles/scrollbar_size.md
+++ b/docs/styles/scrollbar_size.md
@@ -36,7 +36,7 @@ In this example we modify the size of the widget's scrollbar to be _much_ larger
 
 === "scrollbar_size.tcss"
 
-    ```sass hl_lines="13"
+    ```css hl_lines="13"
     --8<-- "docs/examples/styles/scrollbar_size.tcss"
     ```
 
@@ -62,13 +62,13 @@ In the next example we show three containers with differently sized scrollbars.
 
 === "scrollbar_size2.tcss"
 
-    ```sass hl_lines="6 11 16"
+    ```css hl_lines="6 11 16"
     --8<-- "docs/examples/styles/scrollbar_size2.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */
 scrollbar-size: 10 4;
 
diff --git a/docs/styles/text_align.md b/docs/styles/text_align.md
index d503f6de2a..f0a3977b1a 100644
--- a/docs/styles/text_align.md
+++ b/docs/styles/text_align.md
@@ -31,7 +31,7 @@ This example shows, from top to bottom: `left`, `center`, `right`, and `justify`
 
 === "text_align.tcss"
 
-    ```sass hl_lines="2 7 12 17"
+    ```css hl_lines="2 7 12 17"
     --8<-- "docs/examples/styles/text_align.tcss"
     ```
 
@@ -39,7 +39,7 @@ This example shows, from top to bottom: `left`, `center`, `right`, and `justify`
 
 ## CSS
 
-```sass
+```css
 /* Set text in the widget to be right aligned */
 text-align: right;
 ```
diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md
index d178800c32..5c21cf7f92 100644
--- a/docs/styles/text_opacity.md
+++ b/docs/styles/text_opacity.md
@@ -38,13 +38,13 @@ This example shows, from top to bottom, increasing `text-opacity` values.
 
 === "text_opacity.tcss"
 
-    ```sass hl_lines="2 6 10 14 18"
+    ```css hl_lines="2 6 10 14 18"
     --8<-- "docs/examples/styles/text_opacity.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* Set the text to be "half-faded" against the background of the widget */
 text-opacity: 50%;
 ```
diff --git a/docs/styles/text_style.md b/docs/styles/text_style.md
index e684b440e1..d252140b35 100644
--- a/docs/styles/text_style.md
+++ b/docs/styles/text_style.md
@@ -29,7 +29,7 @@ Each of the three text panels has a different text style, respectively `bold`, `
 
 === "text_style.tcss"
 
-    ```sass hl_lines="9 13 17"
+    ```css hl_lines="9 13 17"
     --8<-- "docs/examples/styles/text_style.tcss"
     ```
 
@@ -50,13 +50,13 @@ The next example shows all different text styles on their own, as well as some c
 
 === "text_style_all.tcss"
 
-    ```sass hl_lines="2 6 10 14 18 22 26 30"
+    ```css hl_lines="2 6 10 14 18 22 26 30"
     --8<-- "docs/examples/styles/text_style_all.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 text-style: italic;
 ```
 
diff --git a/docs/styles/tint.md b/docs/styles/tint.md
index 6b0792cdca..b692dacbf8 100644
--- a/docs/styles/tint.md
+++ b/docs/styles/tint.md
@@ -29,13 +29,13 @@ This examples shows a green tint with gradually increasing alpha.
 
 === "tint.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/styles/tint.tcss"
     ```
 
 ## CSS
 
-```sass
+```css
 /* A red tint (could indicate an error) */
 tint: red 20%;
 
diff --git a/docs/styles/visibility.md b/docs/styles/visibility.md
index b80105a48c..78dfe932c4 100644
--- a/docs/styles/visibility.md
+++ b/docs/styles/visibility.md
@@ -47,7 +47,7 @@ Note that the second widget is hidden while leaving a space where it would have
 
 === "visibility.tcss"
 
-    ```sass hl_lines="14"
+    ```css hl_lines="14"
     --8<-- "docs/examples/styles/visibility.tcss"
     ```
 
@@ -74,7 +74,7 @@ The containers all have a white background, and then:
 
 === "visibility_containers.tcss"
 
-    ```sass hl_lines="2-3 6 8-10 12-14 16-18"
+    ```css hl_lines="2-3 7 9-11 13-15 17-19"
     --8<-- "docs/examples/styles/visibility_containers.tcss"
     ```
 
@@ -86,7 +86,7 @@ The containers all have a white background, and then:
 
 ## CSS
 
-```sass
+```css
 /* Widget is invisible */
 visibility: hidden;
 
diff --git a/docs/styles/width.md b/docs/styles/width.md
index a0f7553bac..d694b0169a 100644
--- a/docs/styles/width.md
+++ b/docs/styles/width.md
@@ -30,7 +30,7 @@ This example adds a widget with 50% width of the screen.
 
 === "width.tcss"
 
-    ```sass hl_lines="3"
+    ```css hl_lines="3"
     --8<-- "docs/examples/styles/width.tcss"
     ```
 
@@ -51,7 +51,7 @@ This example adds a widget with 50% width of the screen.
 
 === "width_comparison.tcss"
 
-    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
+    ```css hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/width_comparison.tcss"
     ```
 
@@ -74,7 +74,7 @@ This example adds a widget with 50% width of the screen.
 
 ## CSS
 
-```sass
+```css
 /* Explicit cell width */
 width: 10;
 
diff --git a/docs/tutorial.md b/docs/tutorial.md
index c457a25b55..ce7ed15d5a 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -231,7 +231,7 @@ Let's add a CSS file to our application.
 
 Adding the `CSS_PATH` class variable tells Textual to load the following file when the app starts:
 
-```sass title="stopwatch03.tcss"
+```css title="stopwatch03.tcss"
 --8<-- "docs/examples/tutorial/stopwatch03.tcss"
 ```
 
@@ -246,7 +246,7 @@ This app looks much more like our sketch. Let's look at how Textual uses `stopwa
 
 CSS files contain a number of _declaration blocks_. Here's the first such block from `stopwatch03.tcss` again:
 
-```sass
+```css
 Stopwatch {
     layout: horizontal;
     background: $boost;
@@ -275,7 +275,7 @@ Here's how this CSS code changes how the `Stopwatch` widget is displayed.
 
 Here's the rest of `stopwatch03.tcss` which contains further declaration blocks:
 
-```sass
+```css
 TimeDisplay {
     content-align: center middle;
     opacity: 60%;
@@ -323,7 +323,7 @@ We can accomplish this with a CSS _class_. Not to be confused with a Python clas
 
 Here's the new CSS:
 
-```sass title="stopwatch04.tcss" hl_lines="33-53"
+```css title="stopwatch04.tcss" hl_lines="33-53"
 --8<-- "docs/examples/tutorial/stopwatch04.tcss"
 ```
 
@@ -331,7 +331,7 @@ These new rules are prefixed with `.started`. The `.` indicates that `.started`
 
 Some of the new styles have more than one selector separated by a space. The space indicates that the rule should match the second selector if it is a child of the first. Let's look at one of these styles:
 
-```sass
+```css
 .started #start {
     display: none
 }
diff --git a/docs/widgets/_template.md b/docs/widgets/_template.md
index 70c6a43385..497db695da 100644
--- a/docs/widgets/_template.md
+++ b/docs/widgets/_template.md
@@ -25,7 +25,7 @@ Example app showing the widget:
 
 === "checkbox.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/checkbox.tcss"
     ```
 
diff --git a/docs/widgets/button.md b/docs/widgets/button.md
index 55a4120f9d..4e8c7b01c5 100644
--- a/docs/widgets/button.md
+++ b/docs/widgets/button.md
@@ -25,7 +25,7 @@ Clicking any of the non-disabled buttons in the example app below will result in
 
 === "button.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/button.tcss"
     ```
 
diff --git a/docs/widgets/checkbox.md b/docs/widgets/checkbox.md
index 0b227ba311..fd47c918d6 100644
--- a/docs/widgets/checkbox.md
+++ b/docs/widgets/checkbox.md
@@ -24,7 +24,7 @@ The example below shows check boxes in various states.
 
 === "checkbox.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/checkbox.tcss"
     ```
 
diff --git a/docs/widgets/list_view.md b/docs/widgets/list_view.md
index d5c85cdbc6..ad92a3dd40 100644
--- a/docs/widgets/list_view.md
+++ b/docs/widgets/list_view.md
@@ -25,7 +25,7 @@ The example below shows an app with a simple `ListView`.
 
 === "list_view.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/list_view.tcss"
     ```
 
diff --git a/docs/widgets/loading_indicator.md b/docs/widgets/loading_indicator.md
index 2a5235d12e..0e2f6f43fe 100644
--- a/docs/widgets/loading_indicator.md
+++ b/docs/widgets/loading_indicator.md
@@ -28,7 +28,7 @@ You can set the color of the loading indicator by setting its `color` style.
 
 Here's how you would do that with CSS:
 
-```sass
+```css
 LoadingIndicator {
     color: red;
 }
diff --git a/docs/widgets/placeholder.md b/docs/widgets/placeholder.md
index c8006d780a..9dce8ac0a6 100644
--- a/docs/widgets/placeholder.md
+++ b/docs/widgets/placeholder.md
@@ -28,7 +28,7 @@ The example below shows each placeholder variant.
 
 === "placeholder.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/placeholder.tcss"
     ```
 
diff --git a/docs/widgets/progress_bar.md b/docs/widgets/progress_bar.md
index ab927aa763..ba3f5a346f 100644
--- a/docs/widgets/progress_bar.md
+++ b/docs/widgets/progress_bar.md
@@ -67,7 +67,7 @@ The example below shows a simple app with a progress bar that is keeping track o
 
 === "progress_bar.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/progress_bar.tcss"
     ```
 
@@ -100,7 +100,7 @@ Refer to the [section below](#styling-the-progress-bar) for more information.
 
 === "progress_bar_styled.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/progress_bar_styled.tcss"
     ```
 
diff --git a/docs/widgets/radiobutton.md b/docs/widgets/radiobutton.md
index 8161ceaf17..aa2b1c7205 100644
--- a/docs/widgets/radiobutton.md
+++ b/docs/widgets/radiobutton.md
@@ -26,7 +26,7 @@ The example below shows radio buttons, used within a [`RadioSet`](./radioset.md)
 
 === "radio_button.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/radio_button.tcss"
     ```
 
diff --git a/docs/widgets/radioset.md b/docs/widgets/radioset.md
index 78a6e28d9a..4285b4ffa0 100644
--- a/docs/widgets/radioset.md
+++ b/docs/widgets/radioset.md
@@ -27,7 +27,7 @@ The example below shows two radio sets, one built using a collection of
 
 === "radio_set.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/radio_set.tcss"
     ```
 
@@ -48,7 +48,7 @@ Here is an example of using the message to react to changes in a `RadioSet`:
 
 === "radio_set_changed.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/radio_set_changed.tcss"
     ```
 
diff --git a/docs/widgets/rule.md b/docs/widgets/rule.md
index 5740b42376..5cf4cec983 100644
--- a/docs/widgets/rule.md
+++ b/docs/widgets/rule.md
@@ -26,7 +26,7 @@ The example below shows horizontal rules with all the available line styles.
 
 === "horizontal_rules.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/horizontal_rules.tcss"
     ```
 
@@ -47,7 +47,7 @@ The example below shows vertical rules with all the available line styles.
 
 === "vertical_rules.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/vertical_rules.tcss"
     ```
 
diff --git a/docs/widgets/select.md b/docs/widgets/select.md
index 7a8eb77792..2ba1f1bb72 100644
--- a/docs/widgets/select.md
+++ b/docs/widgets/select.md
@@ -55,7 +55,7 @@ The following example presents a `Select` with a number of options.
 
 === "select.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/select.tcss"
     ```
 
@@ -82,7 +82,7 @@ The following example presents a `Select` created using the `from_values` class
 
 === "select.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/select.tcss"
     ```
 
diff --git a/docs/widgets/sparkline.md b/docs/widgets/sparkline.md
index 61f13da75d..8c0bbb2fa9 100644
--- a/docs/widgets/sparkline.md
+++ b/docs/widgets/sparkline.md
@@ -38,7 +38,7 @@ The example below illustrates the relationship between the data, its length, the
 
 === "sparkline_basic.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/sparkline_basic.tcss"
     ```
 
@@ -66,7 +66,7 @@ The summary function is what determines the height of each bar.
 
 === "sparkline.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/sparkline.tcss"
     ```
 
@@ -87,7 +87,7 @@ The example below shows how to use component classes to change the colors of the
 
 === "sparkline_colors.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/sparkline_colors.tcss"
     ```
 
diff --git a/docs/widgets/switch.md b/docs/widgets/switch.md
index 1482c08a8d..e7543299a9 100644
--- a/docs/widgets/switch.md
+++ b/docs/widgets/switch.md
@@ -22,7 +22,7 @@ The example below shows switches in various states.
 
 === "switch.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/switch.tcss"
     ```