Fix examples.

docs/examples/styles/background.css

@@ -1,14 +1,18 @@
-Static {
+Label {
+    width: 100%;
     height: 1fr;
     content-align: center middle;
     color: white;
-}    
+}
+
 #static1 {
     background: red;
 }
+
 #static2 {
     background: rgb(0, 255, 0);
 }
+
 #static3 {
     background: hsl(240, 100%, 50%);
 }

docs/examples/styles/background.py

@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class BackgroundApp(App):
     def compose(self):
-        yield Static("Widget 1", id="static1")
+        yield Label("Widget 1", id="static1")
-        yield Static("Widget 2", id="static2")
+        yield Label("Widget 2", id="static2")
-        yield Static("Widget 3", id="static3")
+        yield Label("Widget 3", id="static3")
 
 
 app = BackgroundApp(css_path="background.css")

docs/examples/styles/border.css

@@ -1,6 +1,25 @@
+#label1 {
+    background: red 20%;
+    color: red;
+    border: solid red;
+}
+
+#label2 {
+    background: green 20%;
+    color: green;
+    border: dashed green;
+}
+
+#label3 {
+    background: blue 20%;
+    color: blue;
+    border: tall blue;
+}
+
 Screen {
     background: white;
 }
+
 Screen > Label {
     width: 100%;
     height: 5;
@@ -8,19 +27,4 @@ Screen > Label {
     color: white;
     margin: 1;
     box-sizing: border-box;
-}    
-#label1 {
-    background: red 20%;
-    color: red;
-    border: solid red;
-}
-#label2 {
-    background: green 20%;
-    color: green;
-    border: dashed green;
-}
-#label3 {
-    background: blue 20%;
-    color: blue;
-    border: tall blue;
 }

docs/examples/styles/box_sizing.css

@@ -1,7 +1,16 @@
+#static1 {
+    box-sizing: border-box;
+}
+
+#static2 {
+    box-sizing: content-box;
+}
+
 Screen {
     background: white;
     color: black;
 }
+
 App Static {
     background: blue 20%;
     height: 5;
@@ -9,9 +18,3 @@ App Static {
     padding: 1;
     border: wide black;
 }
-#static1 {       
-    box-sizing: border-box;
-}
-#static2 {        
-    box-sizing: content-box;
-}

docs/examples/styles/color.css

@@ -1,14 +1,17 @@
 Label {
-    height:1fr;
+    height: 1fr;
     content-align: center middle;
     width: 100%;
-}    
+}
+
 #label1 {
     color: red;
 }
+
 #label2 {
     color: rgb(0, 255, 0);
 }
+
 #label3 {
-    color: hsl(240, 100%, 50%)
+    color: hsl(240, 100%, 50%);
 }

docs/examples/styles/display.css

@@ -1,12 +1,14 @@
 Screen {
     background: green;
 }
-Static {             
+
-    height: 5;        
+Static {
-    background: white;        
+    height: 5;
-    color: blue;   
+    background: white;
-    border: heavy blue;     
+    color: blue;
+    border: heavy blue;
 }
+
 Static.remove {
     display: none;
 }

docs/examples/styles/grid_gutter.css

@@ -1,6 +1,6 @@
 Grid {
     grid-size: 2 4;
-    grid-gutter: 1 2  /* (1)! */
+    grid-gutter: 1 2;  /* (1)! */
 }
 
 Label {

docs/examples/styles/height.css

@@ -1,4 +1,4 @@
-Screen > Widget {     
+Screen > Widget {
     background: green;
     height: 50%;
     color: white;

docs/examples/styles/overflow.css

@@ -8,8 +8,8 @@ Vertical {
 }
 
 Static {
-    margin: 1 2;  
+    margin: 1 2;
-    background: green 80%;  
+    background: green 80%;
     border: green wide;
     color: white 90%;
     height: auto;

docs/examples/styles/padding.css

@@ -4,6 +4,6 @@ Screen {
 }
 
 Label {
-    padding: 4 8;  
+    padding: 4 8;
-    background: blue 20%;  
+    background: blue 20%;
-}    
+}

docs/examples/styles/tint.css

@@ -1,8 +1,8 @@
-Label {             
+Label {
     height: 3;
     width: 100%;
     text-style: bold;
-    background: white;        
+    background: white;
-    color: black;   
+    color: black;
-    content-align: center middle; 
+    content-align: center middle;
 }

docs/examples/styles/tint.py

@@ -8,7 +8,7 @@ class TintApp(App):
         color = Color.parse("green")
         for tint_alpha in range(0, 101, 10):
             widget = Label(f"tint: green {tint_alpha}%;")
-            widget.styles.tint = color.with_alpha(tint_alpha / 100)
+            widget.styles.tint = color.with_alpha(tint_alpha / 100)  # (1)!
             yield widget
 
 

docs/examples/styles/visibility.css

@@ -1,6 +1,7 @@
 Screen {
     background: green;
 }
+
 Label {
     height: 5;
     width: 100%;
@@ -8,6 +9,7 @@ Label {
     color: blue;
     border: heavy blue;
 }
+
 Label.invisible {
     visibility: hidden;
 }