Fix highlighted lines in docs example

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,15 +206,15 @@ class Button(Static):
 
 The following rule applies a border to this widget:
 
-```sass
+```css
 Button {
   border: solid blue;
 }
 ```
 
 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,22 +411,22 @@ 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;
 }
 ```
 
 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;