Merge pull request #1408 from Textualize/review-styles-reference

Review styles reference

docs/examples/guide/layout/layers.css

@@ -11,8 +11,8 @@ Static {
 }
 
 #box1 {
-    background: darkcyan;
     layer: above;
+    background: darkcyan;
 }
 
 #box2 {

docs/examples/styles/align.py

@@ -1,11 +1,11 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class AlignApp(App):
     def compose(self):
-        yield Static("Vertical alignment with [b]Textual[/]", classes="box")
-        yield Static("Take note, browsers.", classes="box")
+        yield Label("Vertical alignment with [b]Textual[/]", classes="box")
+        yield Label("Take note, browsers.", classes="box")
 
 
 app = AlignApp(css_path="align.css")

docs/examples/styles/align_all.css

@@ -0,0 +1,53 @@
+#left-top {
+    /* align: left top; this is the default value and is implied. */
+}
+
+#center-top {
+    align: center top;
+}
+
+#right-top {
+    align: right top;
+}
+
+#left-middle {
+    align: left middle;
+}
+
+#center-middle {
+    align: center middle;
+}
+
+#right-middle {
+    align: right middle;
+}
+
+#left-bottom {
+    align: left bottom;
+}
+
+#center-bottom {
+    align: center bottom;
+}
+
+#right-bottom {
+    align: right bottom;
+}
+
+Screen {
+    layout: grid;
+    grid-size: 3 3;
+    grid-gutter: 1;
+}
+
+Container {
+    background: $boost;
+    border: solid gray;
+    height: 100%;
+}
+
+Label {
+    width: auto;
+    height: 1;
+    background: $accent;
+}

docs/examples/styles/align_all.py

@@ -0,0 +1,20 @@
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Label
+
+
+class AlignAllApp(App):
+    """App that illustrates all alignments."""
+
+    CSS_PATH = "align_all.css"
+
+    def compose(self) -> ComposeResult:
+        yield Container(Label("left top"), id="left-top")
+        yield Container(Label("center top"), id="center-top")
+        yield Container(Label("right top"), id="right-top")
+        yield Container(Label("left middle"), id="left-middle")
+        yield Container(Label("center middle"), id="center-middle")
+        yield Container(Label("right middle"), id="right-middle")
+        yield Container(Label("left bottom"), id="left-bottom")
+        yield Container(Label("center bottom"), id="center-bottom")
+        yield Container(Label("right bottom"), id="right-bottom")

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 Static("Widget 2", id="static2")
-        yield Static("Widget 3", id="static3")
+        yield Label("Widget 1", id="static1")
+        yield Label("Widget 2", id="static2")
+        yield Label("Widget 3", id="static3")
 
 
 app = BackgroundApp(css_path="background.css")

docs/examples/styles/background_transparency.css

@@ -0,0 +1,49 @@
+#t10 {
+    background: red 10%;
+}
+
+#t20 {
+    background: red 20%;
+}
+
+#t30 {
+    background: red 30%;
+}
+
+#t40 {
+    background: red 40%;
+}
+
+#t50 {
+    background: red 50%;
+}
+
+#t60 {
+    background: red 60%;
+}
+
+#t70 {
+    background: red 70%;
+}
+
+#t80 {
+    background: red 80%;
+}
+
+#t90 {
+    background: red 90%;
+}
+
+#t100 {
+    background: red 100%;
+}
+
+Screen {
+    layout: horizontal;
+}
+
+Static {
+    height: 100%;
+    width: 1fr;
+    content-align: center middle;
+}

docs/examples/styles/background_transparency.py

@@ -0,0 +1,20 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+class BackgroundTransparencyApp(App):
+    """Simple app to exemplify different transparency settings."""
+    def compose(self) -> ComposeResult:
+        yield Static("10%", id="t10")
+        yield Static("20%", id="t20")
+        yield Static("30%", id="t30")
+        yield Static("40%", id="t40")
+        yield Static("50%", id="t50")
+        yield Static("60%", id="t60")
+        yield Static("70%", id="t70")
+        yield Static("80%", id="t80")
+        yield Static("90%", id="t90")
+        yield Static("100%", id="t100")
+
+
+app = BackgroundTransparencyApp(css_path="background_transparency.css")

docs/examples/styles/border.css

@@ -1,25 +1,30 @@
+#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 > Static {
+
+Screen > Label {
+    width: 100%;
     height: 5;
     content-align: center middle;
     color: white;
     margin: 1;
     box-sizing: border-box;
-}    
-#static1 {
-    background: red 20%;
-    color: red;
-    border: solid red;
-}
-#static2 {
-    background: green 20%;
-    color: green;
-    border: dashed green;
-}
-#static3 {
-    background: blue 20%;
-    color: blue;
-    border: tall blue;
 }

docs/examples/styles/border.py

@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class BorderApp(App):
     def compose(self):
-        yield Static("My border is solid red", id="static1")
-        yield Static("My border is dashed green", id="static2")
-        yield Static("My border is tall blue", id="static3")
+        yield Label("My border is solid red", id="label1")
+        yield Label("My border is dashed green", id="label2")
+        yield Label("My border is tall blue", id="label3")
 
 
 app = BorderApp(css_path="border.css")

docs/examples/styles/border_all.css

@@ -0,0 +1,71 @@
+#ascii {
+    border: ascii $accent;
+}
+
+#blank {
+    border: blank $accent;
+}
+
+#dashed {
+    border: dashed $accent;
+}
+
+#double {
+    border: double $accent;
+}
+
+#heavy {
+    border: heavy $accent;
+}
+
+#hidden {
+    border: hidden $accent;
+}
+
+#hkey {
+    border: hkey $accent;
+}
+
+#inner {
+    border: inner $accent;
+}
+
+#none {
+    border: none $accent;
+}
+
+#outer {
+    border: outer $accent;
+}
+
+#round {
+    border: round $accent;
+}
+
+#solid {
+    border: solid $accent;
+}
+
+#tall {
+    border: tall $accent;
+}
+
+#vkey {
+    border: vkey $accent;
+}
+
+#wide {
+    border: wide $accent;
+}
+
+Grid {
+    grid-size: 3 5;
+    align: center middle;
+    grid-gutter: 1 2;
+}
+
+Label {
+    width: 20;
+    height: 3;
+    content-align: center middle;
+}

docs/examples/styles/border_all.py

@@ -0,0 +1,26 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class AllBordersApp(App):
+    def compose(self):
+        yield Grid(
+            Label("ascii", id="ascii"),
+            Label("blank", id="blank"),
+            Label("dashed", id="dashed"),
+            Label("double", id="double"),
+            Label("heavy", id="heavy"),
+            Label("hidden/none", id="hidden"),
+            Label("hkey", id="hkey"),
+            Label("inner", id="inner"),
+            Label("none", id="none"),
+            Label("outer", id="outer"),
+            Label("round", id="round"),
+            Label("solid", id="solid"),
+            Label("tall", id="tall"),
+            Label("vkey", id="vkey"),
+            Label("wide", id="wide"),
+        )
+
+app = AllBordersApp(css_path="border_all.css")

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,13 +1,17 @@
-Static {
-    height:1fr;
+Label {
+    height: 1fr;
     content-align: center middle;
-}    
-#static1 {
+    width: 100%;
+}
+
+#label1 {
     color: red;
 }
-#static2 {
+
+#label2 {
     color: rgb(0, 255, 0);
 }
-#static3 {
-    color: hsl(240, 100%, 50%)
+
+#label3 {
+    color: hsl(240, 100%, 50%);
 }

docs/examples/styles/color.py

@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class ColorApp(App):
     def compose(self):
-        yield Static("I'm red!", id="static1")
-        yield Static("I'm rgb(0, 255, 0)!", id="static2")
-        yield Static("I'm hsl(240, 100%, 50%)!", id="static3")
+        yield Label("I'm red!", id="label1")
+        yield Label("I'm rgb(0, 255, 0)!", id="label2")
+        yield Label("I'm hsl(240, 100%, 50%)!", id="label3")
 
 
 app = ColorApp(css_path="color.css")

docs/examples/styles/color_auto.css

@@ -0,0 +1,26 @@
+Label {
+    color: auto 80%;
+    content-align: center middle;
+    height: 1fr;
+    width: 100%;
+}
+
+#lbl1 {
+    background: red 80%;
+}
+
+#lbl2 {
+    background: yellow 80%;
+}
+
+#lbl3 {
+    background: blue 80%;
+}
+
+#lbl4 {
+    background: pink 80%;
+}
+
+#lbl5 {
+    background: green 80%;
+}

docs/examples/styles/color_auto.py

@@ -0,0 +1,14 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class ColorApp(App):
+    def compose(self):
+        yield Label("The quick brown fox jumps over the lazy dog!", id="lbl1")
+        yield Label("The quick brown fox jumps over the lazy dog!", id="lbl2")
+        yield Label("The quick brown fox jumps over the lazy dog!", id="lbl3")
+        yield Label("The quick brown fox jumps over the lazy dog!", id="lbl4")
+        yield Label("The quick brown fox jumps over the lazy dog!", id="lbl5")
+
+
+app = ColorApp(css_path="color_auto.css")

docs/examples/styles/column_span.css

@@ -0,0 +1,30 @@
+#p1 {
+    column-span: 4;
+}
+#p2 {
+    column-span: 3;
+}
+#p3 {
+    column-span: 1;  /* Didn't need to be set explicitly. */
+}
+#p4 {
+    column-span: 2;
+}
+#p5 {
+    column-span: 2;
+}
+#p6 {
+    /* Default value is 1. */
+}
+#p7 {
+    column-span: 3;
+}
+
+Grid {
+    grid-size: 4 4;
+    grid-gutter: 1 2;
+}
+
+Placeholder {
+    height: 100%;
+}

docs/examples/styles/column_span.py

@@ -0,0 +1,19 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Placeholder
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Placeholder(id="p1"),
+            Placeholder(id="p2"),
+            Placeholder(id="p3"),
+            Placeholder(id="p4"),
+            Placeholder(id="p5"),
+            Placeholder(id="p6"),
+            Placeholder(id="p7"),
+        )
+
+
+app = MyApp(css_path="column_span.css")

docs/examples/styles/content_align.css

@@ -4,7 +4,8 @@
 }
 
 #box2 {
-    content-align: center middle;
+    content-align-horizontal: center;
+    content-align-vertical: middle;
     background: green;
 }
 
@@ -13,7 +14,8 @@
     background: blue;
 }
 
-Static {
+Label {
+    width: 100%;
     height: 1fr;
     padding: 1;
     color: white;

docs/examples/styles/content_align.py

@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class ContentAlignApp(App):
     def compose(self):
-        yield Static("With [i]content-align[/] you can...", id="box1")
-        yield Static("...[b]Easily align content[/]...", id="box2")
-        yield Static("...Horizontally [i]and[/] vertically!", id="box3")
+        yield Label("With [i]content-align[/] you can...", id="box1")
+        yield Label("...[b]Easily align content[/]...", id="box2")
+        yield Label("...Horizontally [i]and[/] vertically!", id="box3")
 
 
 app = ContentAlignApp(css_path="content_align.css")

docs/examples/styles/content_align_all.css

@@ -0,0 +1,39 @@
+#left-top {
+    /* content-align: left top; this is the default implied value. */
+}
+#center-top {
+    content-align: center top;
+}
+#right-top {
+    content-align: right top;
+}
+#left-middle {
+    content-align: left middle;
+}
+#center-middle {
+    content-align: center middle;
+}
+#right-middle {
+    content-align: right middle;
+}
+#left-bottom {
+    content-align: left bottom;
+}
+#center-bottom {
+    content-align: center bottom;
+}
+#right-bottom {
+    content-align: right bottom;
+}
+
+Screen {
+    layout: grid;
+    grid-size: 3 3;
+    grid-gutter: 1;
+}
+
+Label {
+    width: 100%;
+    height: 100%;
+    background: $primary;
+}

docs/examples/styles/content_align_all.py

@@ -0,0 +1,18 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class AllContentAlignApp(App):
+    def compose(self):
+        yield Label("left top", id="left-top")
+        yield Label("center top", id="center-top")
+        yield Label("right top", id="right-top")
+        yield Label("left middle", id="left-middle")
+        yield Label("center middle", id="center-middle")
+        yield Label("right middle", id="right-middle")
+        yield Label("left bottom", id="left-bottom")
+        yield Label("center bottom", id="center-bottom")
+        yield Label("right bottom", id="right-bottom")
+
+
+app = AllContentAlignApp(css_path="content_align_all.css")

docs/examples/styles/display.css

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

docs/examples/styles/dock_all.css

@@ -0,0 +1,34 @@
+#left {
+    dock: left;
+    height: 100%;
+    width: auto;
+    align-vertical: middle;
+}
+#top {
+    dock: top;
+    height: auto;
+    width: 100%;
+    align-horizontal: center;
+}
+#right {
+    dock: right;
+    height: 100%;
+    width: auto;
+    align-vertical: middle;
+}
+#bottom {
+    dock: bottom;
+    height: auto;
+    width: 100%;
+    align-horizontal: center;
+}
+
+Screen {
+    align: center middle;
+}
+
+#big_container {
+    width: 75%;
+    height: 75%;
+    border: round white;
+}

docs/examples/styles/dock_all.py

@@ -0,0 +1,17 @@
+from textual.app import App
+from textual.containers import Container
+from textual.widgets import Label
+
+
+class DockAllApp(App):
+    def compose(self):
+        yield Container(
+            Container(Label("left"), id="left"),
+            Container(Label("top"), id="top"),
+            Container(Label("right"), id="right"),
+            Container(Label("bottom"), id="bottom"),
+            id="big_container",
+        )
+
+
+app = DockAllApp(css_path="dock_all.css")

docs/examples/styles/grid_columns.css

@@ -0,0 +1,11 @@
+Grid {
+    grid-size: 5 2;
+    grid-columns: 1fr 16 2fr;
+}
+
+Label {
+    border: round white;
+    content-align-horizontal: center;
+    width: 100%;
+    height: 100%;
+}

docs/examples/styles/grid_columns.py

@@ -0,0 +1,22 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Label("1fr"),
+            Label("width = 16"),
+            Label("2fr"),
+            Label("1fr"),
+            Label("width = 16"),
+            Label("1fr"),
+            Label("width = 16"),
+            Label("2fr"),
+            Label("1fr"),
+            Label("width = 16"),
+        )
+
+
+app = MyApp(css_path="grid_columns.css")

docs/examples/styles/grid_gutter.css

@@ -0,0 +1,11 @@
+Grid {
+    grid-size: 2 4;
+    grid-gutter: 1 2;  /* (1)! */
+}
+
+Label {
+    border: round white;
+    content-align: center middle;
+    width: 100%;
+    height: 100%;
+}

docs/examples/styles/grid_gutter.py

@@ -0,0 +1,20 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Label("1"),
+            Label("2"),
+            Label("3"),
+            Label("4"),
+            Label("5"),
+            Label("6"),
+            Label("7"),
+            Label("8"),
+        )
+
+
+app = MyApp(css_path="grid_gutter.css")

docs/examples/styles/grid_rows.css

@@ -0,0 +1,11 @@
+Grid {
+    grid-size: 2 5;
+    grid-rows: 1fr 6 25%;
+}
+
+Label {
+    border: round white;
+    content-align: center middle;
+    width: 100%;
+    height: 100%;
+}

docs/examples/styles/grid_rows.py

@@ -0,0 +1,22 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Label("1fr"),
+            Label("1fr"),
+            Label("height = 6"),
+            Label("height = 6"),
+            Label("25%"),
+            Label("25%"),
+            Label("1fr"),
+            Label("1fr"),
+            Label("height = 6"),
+            Label("height = 6"),
+        )
+
+
+app = MyApp(css_path="grid_rows.css")

docs/examples/styles/grid_size_both.css

@@ -0,0 +1,10 @@
+Grid {
+    grid-size: 2 4;  /* (1)! */
+}
+
+Label {
+    border: round white;
+    content-align: center middle;
+    width: 100%;
+    height: 100%;
+}

docs/examples/styles/grid_size_both.py

@@ -0,0 +1,17 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Label("1"),
+            Label("2"),
+            Label("3"),
+            Label("4"),
+            Label("5"),
+        )
+
+
+app = MyApp(css_path="grid_size_both.css")

docs/examples/styles/grid_size_columns.css

@@ -0,0 +1,10 @@
+Grid {
+    grid-size: 2;  /* (1)! */
+}
+
+Label {
+    border: round white;
+    content-align: center middle;
+    width: 100%;
+    height: 100%;
+}

docs/examples/styles/grid_size_columns.py

@@ -0,0 +1,17 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Label("1"),
+            Label("2"),
+            Label("3"),
+            Label("4"),
+            Label("5"),
+        )
+
+
+app = MyApp(css_path="grid_size_columns.css")

docs/examples/styles/height.css

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

docs/examples/styles/height_comparison.css

@@ -0,0 +1,39 @@
+#cells {
+    height: 2;       /* (1)! */
+}
+#percent {
+    height: 12.5%;   /* (2)! */
+}
+#w {
+    height: 5w;      /* (3)! */
+}
+#h {
+    height: 12.5h;   /* (4)! */
+}
+#vw {
+    height: 6.25vw;  /* (5)! */
+}
+#vh {
+    height: 12.5vh;  /* (6)! */
+}
+#auto {
+    height: auto;    /* (7)! */
+}
+#fr1 {
+    height: 1fr;     /* (8)! */
+}
+#fr2 {
+    height: 2fr;     /* (9)! */
+}
+
+Screen {
+    layers: ruler;
+}
+
+Ruler {
+    layer: ruler;
+    dock: right;
+    overflow: hidden;
+    width: 1;
+    background: $accent;
+}

docs/examples/styles/height_comparison.py

@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder, Label, Static
+
+
+class Ruler(Static):
+    def compose(self):
+        ruler_text = "·\n·\n·\n·\n•\n" * 100
+        yield Label(ruler_text)
+
+
+class HeightComparisonApp(App):
+    def compose(self):
+        yield Vertical(
+            Placeholder(id="cells"),  # (1)!
+            Placeholder(id="percent"),
+            Placeholder(id="w"),
+            Placeholder(id="h"),
+            Placeholder(id="vw"),
+            Placeholder(id="vh"),
+            Placeholder(id="auto"),
+            Placeholder(id="fr1"),
+            Placeholder(id="fr2"),
+        )
+        yield Ruler()
+
+
+app = HeightComparisonApp(css_path="height_comparison.css")

docs/examples/styles/layout.css

@@ -10,7 +10,7 @@
     height: auto;
 }
 
-Static {
+Label {
     margin: 1;
     width: 12;
     color: black;

docs/examples/styles/layout.py

@@ -1,20 +1,20 @@
 from textual.app import App
 from textual.containers import Container
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class LayoutApp(App):
     def compose(self):
         yield Container(
-            Static("Layout"),
-            Static("Is"),
-            Static("Vertical"),
+            Label("Layout"),
+            Label("Is"),
+            Label("Vertical"),
             id="vertical-layout",
         )
         yield Container(
-            Static("Layout"),
-            Static("Is"),
-            Static("Horizontal"),
+            Label("Layout"),
+            Label("Is"),
+            Label("Horizontal"),
             id="horizontal-layout",
         )
 

docs/examples/styles/link_background.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-background: red;  /* (1)! */
+}
+
+#lbl3 {
+    link-background: hsl(60,100%,50%) 50%;
+}
+
+#lbl4 {
+    link-background: $accent;
+}

docs/examples/styles/link_background.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkBackgroundApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkBackgroundApp(css_path="link_background.css")

docs/examples/styles/link_color.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-color: red;  /* (1)! */
+}
+
+#lbl3 {
+    link-color: hsl(60,100%,50%) 50%;
+}
+
+#lbl4 {
+    link-color: $accent;
+}

docs/examples/styles/link_color.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkColorApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkColorApp(css_path="link_color.css")

docs/examples/styles/link_hover_background.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-hover-background: red;  /* (1)! */
+}
+
+#lbl3 {
+    link-hover-background: hsl(60,100%,50%) 50%;
+}
+
+#lbl4 {
+    /* Empty to show the default hover background */ /* (2)! */
+}

docs/examples/styles/link_hover_background.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkHoverBackgroundApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkHoverBackgroundApp(css_path="link_hover_background.css")

docs/examples/styles/link_hover_color.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-hover-color: red;  /* (1)! */
+}
+
+#lbl3 {
+    link-hover-color: hsl(60,100%,50%) 50%;
+}
+
+#lbl4 {
+    link-hover-color: black;
+}

docs/examples/styles/link_hover_color.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkHoverColorApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkHoverColorApp(css_path="link_hover_color.css")

docs/examples/styles/link_hover_style.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-hover-style: bold italic;  /* (1)! */
+}
+
+#lbl3 {
+    link-hover-style: reverse strike;
+}
+
+#lbl4 {
+    link-hover-style: bold;
+}

docs/examples/styles/link_hover_style.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkHoverStyleApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkHoverStyleApp(css_path="link_hover_style.css")

docs/examples/styles/link_style.css

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-style: bold italic;  /* (1)! */
+}
+
+#lbl3 {
+    link-style: reverse strike;
+}
+
+#lbl4 {
+    link-style: bold;
+}

docs/examples/styles/link_style.py

@@ -0,0 +1,25 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+class LinkStyleApp(App):
+    def compose(self):
+        yield Label(
+            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            id="lbl1",  # (1)!
+        )
+        yield Label(
+            "Click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl2",  # (2)!
+        )
+        yield Label(
+            "You can also click [@click=app.bell]here[/] for the bell sound.",
+            id="lbl3",  # (3)!
+        )
+        yield Label(
+            "[@click=app.quit]Exit this application.[/]",
+            id="lbl4",  # (4)!
+        )
+
+
+app = LinkStyleApp(css_path="link_style.css")

docs/examples/styles/margin.css

@@ -3,8 +3,9 @@ Screen {
     color: black;
 }
 
-Static {
-    margin: 4 8;  
-    background: blue 20%;  
+Label {
+    margin: 4 8;
+    background: blue 20%;
     border: blue wide;
-}    
+    width: 100%;
+}

docs/examples/styles/margin.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 TEXT = """I must not fear.
 Fear is the mind-killer.
@@ -12,7 +12,7 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class MarginApp(App):
     def compose(self):
-        yield Static(TEXT)
+        yield Label(TEXT)
 
 
 app = MarginApp(css_path="margin.css")

docs/examples/styles/margin_all.css

@@ -0,0 +1,54 @@
+Screen {
+    background: $background;
+}
+
+Grid {
+    grid-size: 4;
+    grid-gutter: 1 2;
+}
+
+Placeholder {
+    width: 100%;
+    height: 100%;
+}
+
+Container {
+    width: 100%;
+    height: 100%;
+}
+
+.bordered {
+    border: white round;
+}
+
+#p1 {
+    /* default is no margin */
+}
+
+#p2 {
+    margin: 1;
+}
+
+#p3 {
+    margin: 1 5;
+}
+
+#p4 {
+    margin: 1 1 2 6;
+}
+
+#p5 {
+    margin-top: 4;
+}
+
+#p6 {
+    margin-right: 3;
+}
+
+#p7 {
+    margin-bottom: 4;
+}
+
+#p8 {
+    margin-left: 3;
+}

docs/examples/styles/margin_all.py

@@ -0,0 +1,20 @@
+from textual.app import App
+from textual.containers import Container, Grid
+from textual.widgets import Placeholder
+
+
+class MarginAllApp(App):
+    def compose(self):
+        yield Grid(
+            Container(Placeholder("no margin", id="p1"), classes="bordered"),
+            Container(Placeholder("margin: 1", id="p2"), classes="bordered"),
+            Container(Placeholder("margin: 1 5", id="p3"), classes="bordered"),
+            Container(Placeholder("margin: 1 1 2 6", id="p4"), classes="bordered"),
+            Container(Placeholder("margin-top: 4", id="p5"), classes="bordered"),
+            Container(Placeholder("margin-right: 3", id="p6"), classes="bordered"),
+            Container(Placeholder("margin-bottom: 4", id="p7"), classes="bordered"),
+            Container(Placeholder("margin-left: 3", id="p8"), classes="bordered"),
+        )
+
+
+app = MarginAllApp(css_path="margin_all.css")

docs/examples/styles/max_height.css

@@ -0,0 +1,25 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+}
+
+Placeholder {
+    height: 100%;
+    width: 1fr;
+}
+
+#p1 {
+    max-height: 10w;
+}
+
+#p2 {
+    max-height: 999;  /* (1)! */
+}
+
+#p3 {
+    max-height: 50%;
+}
+
+#p4 {
+    max-height: 10;
+}

docs/examples/styles/max_height.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class MaxHeightApp(App):
+    def compose(self):
+        yield Horizontal(
+            Placeholder("max-height: 10w", id="p1"),
+            Placeholder("max-height: 999", id="p2"),
+            Placeholder("max-height: 50%", id="p3"),
+            Placeholder("max-height: 10", id="p4"),
+        )
+
+
+app = MaxHeightApp(css_path="max_height.css")

docs/examples/styles/max_width.css

@@ -0,0 +1,25 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+}
+
+Placeholder {
+    width: 100%;
+    height: 1fr;
+}
+
+#p1 {
+    max-width: 50h;
+}
+
+#p2 {
+    max-width: 999;  /* (1)! */
+}
+
+#p3 {
+    max-width: 50%;
+}
+
+#p4 {
+    max-width: 30;
+}

docs/examples/styles/max_width.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder
+
+
+class MaxWidthApp(App):
+    def compose(self):
+        yield Vertical(
+            Placeholder("max-width: 50h", id="p1"),
+            Placeholder("max-width: 999", id="p2"),
+            Placeholder("max-width: 50%", id="p3"),
+            Placeholder("max-width: 30", id="p4"),
+        )
+
+
+app = MaxWidthApp(css_path="max_width.css")

docs/examples/styles/min_height.css

@@ -0,0 +1,26 @@
+Horizontal {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
+Placeholder {
+    width: 1fr;
+    height: 50%;
+}
+
+#p1 {
+    min-height: 25%;  /* (1)! */
+}
+
+#p2 {
+    min-height: 75%;
+}
+
+#p3 {
+    min-height: 30;
+}
+
+#p4 {
+    min-height: 40w;
+}

docs/examples/styles/min_height.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class MinHeightApp(App):
+    def compose(self):
+        yield Horizontal(
+            Placeholder("min-height: 25%", id="p1"),
+            Placeholder("min-height: 75%", id="p2"),
+            Placeholder("min-height: 30", id="p3"),
+            Placeholder("min-height: 40w", id="p4"),
+        )
+
+
+app = MinHeightApp(css_path="min_height.css")

docs/examples/styles/min_width.css

@@ -0,0 +1,26 @@
+Vertical {
+    height: 100%;
+    width: 100%;
+    overflow-x: auto;
+}
+
+Placeholder {
+    height: 1fr;
+    width: 50%;
+}
+
+#p1 {
+    min-width: 25%;  /* (1)! */
+}
+
+#p2 {
+    min-width: 75%;
+}
+
+#p3 {
+    min-width: 100;
+}
+
+#p4 {
+    min-width: 400h;
+}

docs/examples/styles/min_width.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder
+
+
+class MinWidthApp(App):
+    def compose(self):
+        yield Vertical(
+            Placeholder("min-width: 25%", id="p1"),
+            Placeholder("min-width: 75%", id="p2"),
+            Placeholder("min-width: 100", id="p3"),
+            Placeholder("min-width: 400h", id="p4"),
+        )
+
+
+app = MinWidthApp(css_path="min_width.css")

docs/examples/styles/offset.css

@@ -3,10 +3,10 @@ Screen {
     color: black;
     layout: horizontal;
 }
-Static {             
+Label {
     width: 20;
     height: 10;
-    content-align: center middle; 
+    content-align: center middle;
 }
 
 .paul {
@@ -24,7 +24,7 @@ Static {
 }
 
 .chani {
-    offset: 0 5;
+    offset: 0 -3;
     background: blue 20%;
     border: outer blue;
     color: blue;

docs/examples/styles/offset.py

@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class OffsetApp(App):
     def compose(self):
-        yield Static("Paul (offset 8 2)", classes="paul")
-        yield Static("Duncan (offset 4 10)", classes="duncan")
-        yield Static("Chani (offset 0 5)", classes="chani")
+        yield Label("Paul (offset 8 2)", classes="paul")
+        yield Label("Duncan (offset 4 10)", classes="duncan")
+        yield Label("Chani (offset 0 -3)", classes="chani")
 
 
 app = OffsetApp(css_path="offset.css")

docs/examples/styles/opacity.css

@@ -19,10 +19,11 @@
 }
 
 Screen {
-    background: antiquewhite;
+    background: black;
 }
 
-Static {
+Label {
+    width: 100%;
     height: 1fr;
     border: outer dodgerblue;
     background: lightseagreen;

docs/examples/styles/opacity.py

@@ -1,14 +1,14 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class OpacityApp(App):
     def compose(self):
-        yield Static("opacity: 0%", id="zero-opacity")
-        yield Static("opacity: 25%", id="quarter-opacity")
-        yield Static("opacity: 50%", id="half-opacity")
-        yield Static("opacity: 75%", id="three-quarter-opacity")
-        yield Static("opacity: 100%", id="full-opacity")
+        yield Label("opacity: 0%", id="zero-opacity")
+        yield Label("opacity: 25%", id="quarter-opacity")
+        yield Label("opacity: 50%", id="half-opacity")
+        yield Label("opacity: 75%", id="three-quarter-opacity")
+        yield Label("opacity: 100%", id="full-opacity")
 
 
 app = OpacityApp(css_path="opacity.css")

docs/examples/styles/outline.css

@@ -2,8 +2,10 @@ Screen {
     background: white;
     color: black;
 }
-Static {
+
+Label {
     margin: 4 8;
     background: green 20%;
     outline: wide green;
+    width: 100%;
 }

docs/examples/styles/outline.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 TEXT = """I must not fear.
@@ -13,7 +13,7 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class OutlineApp(App):
     def compose(self):
-        yield Static(TEXT)
+        yield Label(TEXT)
 
 
 app = OutlineApp(css_path="outline.css")

docs/examples/styles/outline_all.css

@@ -0,0 +1,71 @@
+#ascii {
+    outline: ascii $accent;
+}
+
+#blank {
+    outline: blank $accent;
+}
+
+#dashed {
+    outline: dashed $accent;
+}
+
+#double {
+    outline: double $accent;
+}
+
+#heavy {
+    outline: heavy $accent;
+}
+
+#hidden {
+    outline: hidden $accent;
+}
+
+#hkey {
+    outline: hkey $accent;
+}
+
+#inner {
+    outline: inner $accent;
+}
+
+#none {
+    outline: none $accent;
+}
+
+#outer {
+    outline: outer $accent;
+}
+
+#round {
+    outline: round $accent;
+}
+
+#solid {
+    outline: solid $accent;
+}
+
+#tall {
+    outline: tall $accent;
+}
+
+#vkey {
+    outline: vkey $accent;
+}
+
+#wide {
+    outline: wide $accent;
+}
+
+Grid {
+    grid-size: 3 5;
+    align: center middle;
+    grid-gutter: 1 2;
+}
+
+Label {
+    width: 20;
+    height: 3;
+    content-align: center middle;
+}

docs/examples/styles/outline_all.py

@@ -0,0 +1,26 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+
+class AllOutlinesApp(App):
+    def compose(self):
+        yield Grid(
+            Label("ascii", id="ascii"),
+            Label("blank", id="blank"),
+            Label("dashed", id="dashed"),
+            Label("double", id="double"),
+            Label("heavy", id="heavy"),
+            Label("hidden/none", id="hidden"),
+            Label("hkey", id="hkey"),
+            Label("inner", id="inner"),
+            Label("none", id="none"),
+            Label("outer", id="outer"),
+            Label("round", id="round"),
+            Label("solid", id="solid"),
+            Label("tall", id="tall"),
+            Label("vkey", id="vkey"),
+            Label("wide", id="wide"),
+        )
+
+app = AllOutlinesApp(css_path="outline_all.css")

docs/examples/styles/outline_vs_border.css

@@ -0,0 +1,11 @@
+Label {
+    height: 8;
+}
+
+.outline {
+    outline: $error round;
+}
+
+.border {
+    border: $success heavy;
+}

docs/examples/styles/outline_vs_border.py

@@ -0,0 +1,21 @@
+from textual.app import App
+from textual.widgets import Label
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class OutlineBorderApp(App):
+    def compose(self):
+        yield Label(TEXT, classes="outline")
+        yield Label(TEXT, classes="border")
+        yield Label(TEXT, classes="outline border")
+
+
+app = OutlineBorderApp(css_path="outline_vs_border.css")

docs/examples/styles/overflow.css

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

docs/examples/styles/padding.css

@@ -3,7 +3,8 @@ Screen {
     color: blue;
 }
 
-Static {
-    padding: 4 8;  
-    background: blue 20%;  
-}    
+Label {
+    padding: 4 8;
+    background: blue 20%;
+    width: 100%;
+}

docs/examples/styles/padding.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 TEXT = """I must not fear.
 Fear is the mind-killer.
@@ -12,7 +12,7 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class PaddingApp(App):
     def compose(self):
-        yield Static(TEXT)
+        yield Label(TEXT)
 
 
 app = PaddingApp(css_path="padding.css")

docs/examples/styles/padding_all.css

@@ -0,0 +1,45 @@
+Screen {
+    background: $background;
+}
+
+Grid {
+    grid-size: 4;
+    grid-gutter: 1 2;
+}
+
+Placeholder {
+    width: auto;
+    height: auto;
+}
+
+#p1 {
+    /* default is no padding */
+}
+
+#p2 {
+    padding: 1;
+}
+
+#p3 {
+    padding: 1 5;
+}
+
+#p4 {
+    padding: 1 1 2 6;
+}
+
+#p5 {
+    padding-top: 4;
+}
+
+#p6 {
+    padding-right: 3;
+}
+
+#p7 {
+    padding-bottom: 4;
+}
+
+#p8 {
+    padding-left: 3;
+}

docs/examples/styles/padding_all.py

@@ -0,0 +1,20 @@
+from textual.app import App
+from textual.containers import Container, Grid
+from textual.widgets import Placeholder
+
+
+class PaddingAllApp(App):
+    def compose(self):
+        yield Grid(
+            Placeholder("no padding", id="p1"),
+            Placeholder("padding: 1", id="p2"),
+            Placeholder("padding: 1 5", id="p3"),
+            Placeholder("padding: 1 1 2 6", id="p4"),
+            Placeholder("padding-top: 4", id="p5"),
+            Placeholder("padding-right: 3", id="p6"),
+            Placeholder("padding-bottom: 4", id="p7"),
+            Placeholder("padding-left: 3", id="p8"),
+        )
+
+
+app = PaddingAllApp(css_path="padding_all.css")

docs/examples/styles/row_span.css

@@ -0,0 +1,30 @@
+#p1 {
+    row-span: 4;
+}
+#p2 {
+    row-span: 3;
+}
+#p3 {
+    row-span: 2;
+}
+#p4 {
+    row-span: 1;  /* Didn't need to be set explicitly. */
+}
+#p5 {
+    row-span: 3;
+}
+#p6 {
+    row-span: 2;
+}
+#p7 {
+    /* Default value is 1. */
+}
+
+Grid {
+    grid-size: 4 4;
+    grid-gutter: 1 2;
+}
+
+Placeholder {
+    height: 100%;
+}

docs/examples/styles/row_span.py

@@ -0,0 +1,19 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Placeholder
+
+
+class MyApp(App):
+    def compose(self):
+        yield Grid(
+            Placeholder(id="p1"),
+            Placeholder(id="p2"),
+            Placeholder(id="p3"),
+            Placeholder(id="p4"),
+            Placeholder(id="p5"),
+            Placeholder(id="p6"),
+            Placeholder(id="p7"),
+        )
+
+
+app = MyApp(css_path="row_span.css")

docs/examples/styles/scrollbar_corner_color.css

@@ -0,0 +1,4 @@
+Screen {
+    overflow: auto auto;
+    scrollbar-corner-color: white;
+}

docs/examples/styles/scrollbar_corner_color.py

@@ -0,0 +1,19 @@
+from textual.app import App
+from textual.widgets import Label
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain.
+"""
+
+
+class ScrollbarCornerColorApp(App):
+    def compose(self):
+        yield Label(TEXT.replace("\n", " ") + "\n" + TEXT * 10)
+
+
+app = ScrollbarCornerColorApp(css_path="scrollbar_corner_color.css")

docs/examples/styles/scrollbar_size.css

@@ -4,7 +4,7 @@ Screen {
     layout: horizontal;
 }
 
-Static {
+Label {
     padding: 1 2;
     width: 200;
 }

docs/examples/styles/scrollbar_size.py

@@ -1,6 +1,6 @@
 from textual.app import App
 from textual.containers import Vertical
-from textual.widgets import Static
+from textual.widgets import Label
 
 TEXT = """I must not fear.
 Fear is the mind-killer.
@@ -14,7 +14,7 @@ Where the fear has gone there will be nothing. Only I will remain.
 
 class ScrollbarApp(App):
     def compose(self):
-        yield Vertical(Static(TEXT * 5), classes="panel")
+        yield Vertical(Label(TEXT * 5), classes="panel")
 
 
 app = ScrollbarApp(css_path="scrollbar_size.css")

docs/examples/styles/scrollbar_size2.css

@@ -0,0 +1,18 @@
+Container {
+    width: 1fr;
+}
+
+#v1 {
+    scrollbar-size: 5 1;
+    background: red 20%;
+}
+
+#v2 {
+    scrollbar-size-vertical: 1;
+    background: green 20%;
+}
+
+#v3 {
+    scrollbar-size-horizontal: 5;
+    background: blue 20%;
+}

docs/examples/styles/scrollbar_size2.py

@@ -0,0 +1,24 @@
+from textual.app import App
+from textual.containers import Horizontal, Container
+from textual.widgets import Label
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain.
+"""
+
+
+class ScrollbarApp(App):
+    def compose(self):
+        yield Horizontal(
+            Container(Label(TEXT * 5), id="v1"),
+            Container(Label(TEXT * 5), id="v2"),
+            Container(Label(TEXT * 5), id="v3"),
+        )
+
+
+app = ScrollbarApp(css_path="scrollbar_size2.css")

docs/examples/styles/scrollbars.css

@@ -1,23 +1,14 @@
-Screen {
-    background: #212121;
-    color: white 80%;
-    layout: horizontal;
+Label {
+    width: 150%;
+    height: 150%;
 }
 
-Static {
-    padding: 1 2;
-}
-
-.panel1 {
-    width: 1fr;
+.right {
+    scrollbar-background: red;
     scrollbar-color: green;
-    scrollbar-background: #bbb;
-    padding: 1 2;        
-} 
+    scrollbar-corner-color: blue;
+}
 
-.panel2 {
-    width: 1fr;
-    scrollbar-color: yellow;
-    scrollbar-background: purple;
-    padding: 1 2;
-}   
+Horizontal > Container {
+    width: 50%;
+}

docs/examples/styles/scrollbars.py

@@ -1,6 +1,6 @@
 from textual.app import App
-from textual.containers import Vertical
-from textual.widgets import Static
+from textual.containers import Horizontal, Container
+from textual.widgets import Label
 
 TEXT = """I must not fear.
 Fear is the mind-killer.
@@ -14,8 +14,10 @@ Where the fear has gone there will be nothing. Only I will remain.
 
 class ScrollbarApp(App):
     def compose(self):
-        yield Vertical(Static(TEXT * 5), classes="panel1")
-        yield Vertical(Static(TEXT * 5), classes="panel2")
+        yield Horizontal(
+            Container(Label(TEXT * 10)),
+            Container(Label(TEXT * 10), classes="right"),
+        )
 
 
 app = ScrollbarApp(css_path="scrollbars.css")

docs/examples/styles/scrollbars2.css

@@ -0,0 +1,8 @@
+Screen {
+    scrollbar-background: blue;
+    scrollbar-background-active: red;
+    scrollbar-background-hover: purple;
+    scrollbar-color: cyan;
+    scrollbar-color-active: yellow;
+    scrollbar-color-hover: pink;
+}

docs/examples/styles/scrollbars2.py

@@ -0,0 +1,19 @@
+from textual.app import App
+from textual.widgets import Label
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain.
+"""
+
+
+class Scrollbar2App(App):
+    def compose(self):
+        yield Label(TEXT * 10)
+
+
+app = Scrollbar2App(css_path="scrollbars2.css")

docs/examples/styles/text_align.css

@@ -1,24 +1,29 @@
 #one {
-  text-align: left;
-  background: lightblue;
-
+    text-align: left;
+    background: lightblue;
 }
 
 #two {
-  text-align: center;
-  background: indianred;
+    text-align: center;
+    background: indianred;
 }
 
 #three {
-  text-align: right;
-  background: palegreen;
+    text-align: right;
+    background: palegreen;
 }
 
 #four {
-  text-align: justify;
-  background: palevioletred;
+    text-align: justify;
+    background: palevioletred;
 }
 
-Static {
-  padding: 1;
+Label {
+    padding: 1 2;
+    height: 100%;
+    color: auto;
+}
+
+Grid {
+    grid-size: 2 2;
 }

docs/examples/styles/text_align.py

@@ -1,7 +1,6 @@
-from __future__ import annotations
-
-from textual.app import App, ComposeResult
-from textual.widgets import Static
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
 
 TEXT = (
     "I must not fear. Fear is the mind-killer. Fear is the little-death that "
@@ -11,18 +10,13 @@ TEXT = (
 
 
 class TextAlign(App):
-    def compose(self) -> ComposeResult:
-        left = Static("[b]Left aligned[/]\n" + TEXT, id="one")
-        yield left
-
-        right = Static("[b]Center aligned[/]\n" + TEXT, id="two")
-        yield right
-
-        center = Static("[b]Right aligned[/]\n" + TEXT, id="three")
-        yield center
-
-        full = Static("[b]Justified[/]\n" + TEXT, id="four")
-        yield full
+    def compose(self):
+        yield Grid(
+            Label("[b]Left aligned[/]\n" + TEXT, id="one"),
+            Label("[b]Center aligned[/]\n" + TEXT, id="two"),
+            Label("[b]Right aligned[/]\n" + TEXT, id="three"),
+            Label("[b]Justified[/]\n" + TEXT, id="four"),
+        )
 
 
 app = TextAlign(css_path="text_align.css")

docs/examples/styles/text_opacity.css

@@ -18,8 +18,9 @@
     text-opacity: 100%;
 }
 
-Static {
+Label {
     height: 1fr;
+    width: 100%;
     text-align: center;
     text-style: bold;
 }

docs/examples/styles/text_opacity.py

@@ -1,14 +1,14 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class TextOpacityApp(App):
     def compose(self):
-        yield Static("text-opacity: 0%", id="zero-opacity")
-        yield Static("text-opacity: 25%", id="quarter-opacity")
-        yield Static("text-opacity: 50%", id="half-opacity")
-        yield Static("text-opacity: 75%", id="three-quarter-opacity")
-        yield Static("text-opacity: 100%", id="full-opacity")
+        yield Label("text-opacity: 0%", id="zero-opacity")
+        yield Label("text-opacity: 25%", id="quarter-opacity")
+        yield Label("text-opacity: 50%", id="half-opacity")
+        yield Label("text-opacity: 75%", id="three-quarter-opacity")
+        yield Label("text-opacity: 100%", id="full-opacity")
 
 
 app = TextOpacityApp(css_path="text_opacity.css")

docs/examples/styles/text_style.css

@@ -1,18 +1,18 @@
 Screen {
     layout: horizontal;    
 }
-Static {
-    width:1fr;        
+Label {
+    width: 1fr;
 }    
-#static1 {
+#lbl1 {
     background: red 30%;
     text-style: bold;
 }
-#static2 {
+#lbl2 {
     background: green 30%;
     text-style: italic;
 }
-#static3 {
+#lbl3 {
     background: blue 30%;
     text-style: reverse;
 }

docs/examples/styles/text_style.py

@@ -1,5 +1,5 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 TEXT = """I must not fear.
 Fear is the mind-killer.
@@ -12,9 +12,9 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class TextStyleApp(App):
     def compose(self):
-        yield Static(TEXT, id="static1")
-        yield Static(TEXT, id="static2")
-        yield Static(TEXT, id="static3")
+        yield Label(TEXT, id="lbl1")
+        yield Label(TEXT, id="lbl2")
+        yield Label(TEXT, id="lbl3")
 
 
 app = TextStyleApp(css_path="text_style.css")

docs/examples/styles/text_style_all.css

@@ -0,0 +1,42 @@
+#lbl1 {
+    text-style: none;
+}
+
+#lbl2 {
+    text-style: bold;
+}
+
+#lbl3 {
+    text-style: italic;
+}
+
+#lbl4 {
+    text-style: reverse;
+}
+
+#lbl5 {
+    text-style: strike;
+}
+
+#lbl6 {
+    text-style: underline;
+}
+
+#lbl7 {
+    text-style: bold italic;
+}
+
+#lbl8 {
+    text-style: reverse strike;
+}
+
+Grid {
+    grid-size: 4;
+    grid-gutter: 1 2;
+    margin: 1 2;
+    height: 100%;
+}
+
+Label {
+    height: 100%;
+}

docs/examples/styles/text_style_all.py

@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Label
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class AllTextStyleApp(App):
+    def compose(self):
+        yield Grid(
+            Label("none\n" + TEXT, id="lbl1"),
+            Label("bold\n" + TEXT, id="lbl2"),
+            Label("italic\n" + TEXT, id="lbl3"),
+            Label("reverse\n" + TEXT, id="lbl4"),
+            Label("strike\n" + TEXT, id="lbl5"),
+            Label("underline\n" + TEXT, id="lbl6"),
+            Label("bold italic\n" + TEXT, id="lbl7"),
+            Label("reverse strike\n" + TEXT, id="lbl8"),
+        )
+
+
+app = AllTextStyleApp(css_path="text_style_all.css")