Highlight that the label acquires an id in the example code

While the code here isn't exactly written as a play-along tutorial, it's
reasonable to expect that some one can and will. This commit has been
written because exactly that situation happened.

The problem here is without the ID on the label the layout will end up
looking very different from that shown in the docs; which will halt the
reader's flow as they try and figure out what they did wrong.

Counterpoint: this is a guide, not a tutorial, so it seemed reasonable to
only highlight the important thing that's changing. Personally I think I'd
argue in favour of highlighting all the changes from question01 to
question02.

Addresses #1905.
This commit is contained in:
Dave Pearson
2023-03-01 09:05:07 +00:00
parent 5d6f6a12ed
commit f9e7c80256

View File

@@ -157,10 +157,14 @@ The chapter on [Textual CSS](CSS.md) describes how to use CSS in detail. For now
The following example enables loading of CSS by adding a `CSS_PATH` class variable:
```python title="question02.py" hl_lines="6"
```python title="question02.py" hl_lines="6 9"
--8<-- "docs/examples/app/question02.py"
```
!!! note
We also added an `id` to the `Label`, because we want to style it in the CSS.
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.css"` in the same directory as the Python code. Here is that CSS file:
```sass title="question02.css"