fix styles examples, box model docs

docs/examples/guide/dom1.py

@@ -6,3 +6,5 @@ class ExampleApp(App):
 
 
 app = ExampleApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/dom2.py

@@ -9,3 +9,5 @@ class ExampleApp(App):
 
 
 app = ExampleApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/dom3.py

@@ -21,3 +21,5 @@ class ExampleApp(App):
 
 
 app = ExampleApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/dom4.css

@@ -2,9 +2,9 @@
 /* The top level dialog (a Container) */
 #dialog {
     margin: 4 8;
-    background: darkblue 20%;
-    color: darkblue;
-    border: tall darkblue;
+    background: $primary;
+    color: $text-primary;
+    border: tall $text-primary;
     padding: 1 2;
 }
 

docs/examples/guide/styles/screen.py

@@ -0,0 +1,12 @@
+from textual.app import App
+
+
+class ScreenApp(App):
+    def on_mount(self) -> None:
+        self.screen.styles.background = "darkblue"
+        self.screen.styles.border = ("heavy", "white")
+
+
+app = ScreenApp()
+if __name__ == "__main__":
+    app.run()

docs/guide/CSS.md

@@ -75,7 +75,7 @@ Let's look at a trivial Textual app.
     ```{.textual path="docs/examples/guide/dom1.py"}
     ```
 
-When you run this code you will have an instance of an `ExampleApp` in memory. This app class will also create a `Screen` object. In DOM terms, the `Screen` is a _child_ of `ExampleApp`.
+This example creates an instance of `ExampleApp`, which will implicitly create a `Screen` object. In DOM terms, the `Screen` is a _child_ of `ExampleApp`.
 
 With the above example, the DOM will look like the following:
 
@@ -139,7 +139,7 @@ You may recognize some of the elements in the above screenshot, but it doesn't q
 
 ## CSS files
 
-To add a stylesheet we need to pass the path to a CSS file via the app classes' `css_path` argument:
+To add a stylesheet we pass the path to the app with the `css_path` parameter:
 
 ```python hl_lines="23"
 --8<-- "docs/examples/guide/dom4.py"
@@ -163,7 +163,7 @@ With the CSS in place, the output looks very different:
 
 ### Why CSS?
 
-It is reasonable to ask why use CSS at all? Python is a powerful and expressive language. Wouldn't it be easier to do everything in your `.py` files?
+It is reasonable to ask why use CSS at all? Python is a powerful and expressive language. Wouldn't it be easier to set styles in your `.py` files?
 
 A major advantage of CSS is that it separates how your app _looks_ from how it _works_. Setting styles in Python can generate a lot of spaghetti code which can make it hard to see the important logic in your application.
 

docs/guide/styles.md

@@ -7,7 +7,18 @@ Textual provides a large number of *styles* you can use to customize how your ap
 
 Every widget class in Textual provides a `styles` object which contains a number of writable attributes. Styles define the position and size of a widget, in addition to color, text style, borders, alignment and much more.
 
+Let's look at a simple example which sets the styles on the `screen` (a special widget that represents the screen).
 
+```python title="screen.py" hl_lines="6-7"
+--8<-- "docs/examples/guide/styles/screen.py"
+```
+
+The first line sets `screen.styles.background` to `"darkblue"` which will change the background color to dark blue. There are a few other ways of setting color which we will explore later.
+
+The second line sets `screen.styles.border` to a tuple of `("heavy", "white")` which tells Textual to draw a white border with a style of `"heavy"`. Running this code will show the following:
+
+```{.textual path="docs/examples/guide/styles/screen.py"}
+```
 
 ## Box Model