diff --git a/docs/guide/CSS.md b/docs/guide/CSS.md index 8bf7f60aa..0d38a616c 100644 --- a/docs/guide/CSS.md +++ b/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" ``` diff --git a/docs/guide/app.md b/docs/guide/app.md index bcdf1183b..a45827a7a 100644 --- a/docs/guide/app.md +++ b/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: