From b1fa3c0a2ae6721cd64dd8d8b92adb80adc368d6 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Sat, 10 Sep 2022 17:00:43 +0100 Subject: [PATCH] words --- docs/guide/CSS.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/guide/CSS.md b/docs/guide/CSS.md index 5f755a643..4025d0a92 100644 --- a/docs/guide/CSS.md +++ b/docs/guide/CSS.md @@ -4,13 +4,14 @@ Textual uses CSS to apply style to widgets. If you have any exposure to web deve ## Stylesheets -CSS stands for _Cascading Stylesheets_. A stylesheet is a list of styles and rules about how those styles should be applied to a page. In the case of Textual, the stylesheet applies styles to widgets but otherwise it is the same idea. +CSS stands for _Cascading Stylesheets_. A stylesheet is a list of styles and rules about how those styles should be applied to a page. In the case of Textual, the stylesheet applies [styles](./styles.md) to widgets but otherwise it is the same idea. !!! note - Depending on what you want to build with Textual, you may not need to learn Textual CSS at all. Widgets are packaged with CSS styles so apps with exclusively pre-built widgets may not need any additional CSS. + Depending on what you want to build with Textual, you may not need to learn Textual CSS at all. Widgets are packaged with CSS styles so apps may not need any additional CSS. -Textual CSS defines a set of rules which apply visual _styles_ to your application and widgets. These style can customize settings for properties such as color, border, size, alignment; and more dynamic features such as animation and hover effects. As powerful as it is, CSS in Textual is quite straightforward. + +When Textual loads CSS it sets attributes of your widgets's `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. @@ -40,7 +41,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`. +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" Header { @@ -54,7 +55,7 @@ Header { The lines inside the curly braces contains CSS _rules_, which consist of a rule name and rule value separated by a colon and ending in a semi-colon. Such rules are typically written one per line, but you could add additional rules as long as they are separated by semi-colons. -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 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