Split layout into separate Python and CSS files for docs example

docs/examples/styles/layout.css

@@ -0,0 +1,24 @@
+#vertical-layout {
+    layout: vertical;
+    background: darkmagenta;
+    height: auto;
+}
+
+#horizontal-layout {
+    layout: horizontal;
+    background: darkcyan;
+    height: auto;
+}
+
+#center-layout {
+    layout: center;
+    background: darkslateblue;
+    height: 7;
+}
+
+Static {
+    margin: 1;
+    width: 12;
+    color: black;
+    background: yellowgreen;
+}

docs/examples/styles/layout.py

@@ -5,30 +5,6 @@ from textual.widgets import Static
 
 
 class LayoutApp(App):
-    CSS = """
-    #vertical-layout {
-        layout: vertical;
-        background: $panel;
-        height: auto;
-    }
-    #horizontal-layout {
-        layout: horizontal;
-        background: $panel-darken-1;
-        height: auto;
-    }
-    #center-layout {
-        layout: center;
-        background: $panel-darken-2;
-        height: 7;
-    }
-    Screen Static {
-        margin: 1;
-        width: 12;
-        color: $text-primary;
-        background: $primary;
-    }
-    """
-
     def compose(self):
         yield layout.Container(
             Static("Layout"),
@@ -48,5 +24,4 @@ class LayoutApp(App):
         )
 
 
-app = LayoutApp()
+app = LayoutApp(css_path="layout.css")
-app.run()

docs/styles/layout.md

@@ -26,6 +26,12 @@ Note how the `layout` property affects the arrangement of widgets in the example
     --8<-- "docs/examples/styles/layout.py"
     ```
 
+=== "layout.css"
+
+    ```sass
+    --8<-- "docs/examples/styles/layout.css"
+    ```
+
 === "Output"
 
     ```{.textual path="docs/examples/styles/layout.py"}