Show TCSS as css instead of sass.

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;

docs/css_types/border.md

@@ -37,7 +37,7 @@ textual borders
 
 ### CSS
 
-```sass
+```css
 #container {
     border: heavy red;
 }

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 */
 }

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;
 }

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
 }

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;
 }

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;
 }

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 */
 }

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 */
 }

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%;

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 */

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;
 }

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;

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;
 }

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;
 }

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"
     ```
 

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"
 ```
 

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;

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```

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"
     ```

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

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 */

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;
 

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;
 

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;

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 

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;
 

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 */

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;
 

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. */

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;
 ```
 

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%;
 

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;
 

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%;
 

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;
 

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"
     ```
 

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
 ```
 

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;
 

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;

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;
 ```

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;
 ```

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;
 ```
 

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"
     ```
 

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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;
 ```

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 */

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;
 

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;
 

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;
 

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;
 

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;
 

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%;
 ```

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;
 

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;
 

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 */

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"
     ```

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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;
 ```
 

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. */
 ```

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;
 

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;
 ```

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%;
 ```

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;
 ```
 

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%;
 

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 7 9-11 13-15 17-19"
+    ```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;
 

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;
 

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
 }

docs/widgets/_template.md

@@ -25,7 +25,7 @@ Example app showing the widget:
 
 === "checkbox.tcss"
 
-    ```sass
+    ```css
     --8<-- "docs/examples/widgets/checkbox.tcss"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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;
 }

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```