From f9e7c80256b39364b24071993cadd87088edd361 Mon Sep 17 00:00:00 2001 From: Dave Pearson Date: Wed, 1 Mar 2023 09:05:07 +0000 Subject: [PATCH] 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. --- docs/guide/app.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/guide/app.md b/docs/guide/app.md index eaa874ed3..891ea72a5 100644 --- a/docs/guide/app.md +++ b/docs/guide/app.md @@ -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"