update docs for tcss (#3179)

* update docs for tcss

* letter

docs/guide/CSS.md

@@ -2,13 +2,13 @@
 
 Textual uses CSS to apply style to widgets. If you have any exposure to web development you will have encountered CSS, but don't worry if you haven't: this chapter will get you up to speed.
 
+!!! tip "VSCode User?"
+
+    The official [Textual CSS](https://marketplace.visualstudio.com/items?itemName=Textualize.textual-syntax-highlighter) extension adds syntax highlighting for both external files and inline CSS.
+
 ## Stylesheets
 
-CSS stands for _Cascading Stylesheets_. A stylesheet is a list of styles and rules about how those styles should be applied to a web page. In the case of Textual, the stylesheet applies [styles](./styles.md) to widgets, but otherwise it is the same idea.
-
-When Textual loads CSS it sets attributes on your widgets' `style` object. The effect is the same as if you had set attributes in Python.
-
-CSS is typically stored in an external file with the extension `.css` alongside your Python code.
+CSS stands for _Cascading Stylesheet_. A stylesheet is a list of styles and rules about how those styles should be applied to a web page. In the case of Textual, the stylesheet applies [styles](./styles.md) to widgets, but otherwise it is the same idea.
 
 Let's look at some Textual CSS.
 
@@ -52,6 +52,7 @@ The lines inside the curly braces contains CSS _rules_, which consist of a rule
 
 The first rule in the above example reads `"dock: top;"`. The rule name is `dock` which tells Textual to place the widget on an edge of the screen. The text after the colon is `top` which tells Textual to dock to the _top_ of the screen. Other valid values for `dock` are "right", "bottom", or "left"; but "top" is most appropriate for a header.
 
+
 ## The DOM
 
 The DOM, or _Document Object Model_, is a term borrowed from the web world. Textual doesn't use documents but the term has stuck. In Textual CSS, the DOM is an arrangement of widgets you can visualize as a tree-like structure.
@@ -112,11 +113,10 @@ To further explore the DOM, we're going to build a simple dialog with a question
 - `textual.widgets.Static` For simple content.
 - `textual.widgets.Button` For a clickable button.
 
-=== "dom3.py"
 
-    ```python hl_lines="12 13 14 15 16 17 18 19 20"
-    --8<-- "docs/examples/guide/dom3.py"
-    ```
+```python hl_lines="12 13 14 15 16 17 18 19 20" title="dom3.py"
+--8<-- "docs/examples/guide/dom3.py"
+```
 
 We've added a Container to our DOM which (as the name suggests) is a container for other widgets. The container has a number of other widgets passed as positional arguments which will be added as the children of the container. Not all widgets accept child widgets in this way. A Button widget doesn't require any children, for example.
 
@@ -138,7 +138,13 @@ You may recognize some elements in the above screenshot, but it doesn't quite lo
 
 To add a stylesheet set the `CSS_PATH` classvar to a relative path:
 
-```python hl_lines="9"
+
+!!! note
+
+    Textual CSS files are typically given the extension `.tcss` to differentiate them from browser CSS (`.css`).
+
+
+```python hl_lines="9" title="dom4.py"
 --8<-- "docs/examples/guide/dom4.py"
 ```
 
@@ -147,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
+```sass title="dom4.tcss"
 --8<-- "docs/examples/guide/dom4.tcss"
 ```
 

docs/guide/app.md

@@ -209,6 +209,10 @@ The addition of `[str]` tells mypy that `run()` is expected to return a string.
 
 Textual apps can reference [CSS](CSS.md) files which define how your app and widgets will look, while keeping your Python code free of display related code (which tends to be messy).
 
+!!! info
+
+    Textual apps typically use the extension `.tcss` for external CSS files to differentiate them from browser (`.css`) files.
+
 The chapter on [Textual CSS](CSS.md) describes how to use CSS in detail. For now let's look at how your app references external CSS files.
 
 The following example enables loading of CSS by adding a `CSS_PATH` class variable: