Docs content align (#700)

* Docs for content-align, some bug fixes for it too

* Make the example output a little clearer

* Remove app.run() from content-align docs example

* Improve wording

* Move content-align and scrollbar-gutter docs exmaples to split css/py files

* Remove app.run() from scrollbar-gutter docs example

docs/examples/styles/content_align.css

@@ -0,0 +1,20 @@
+#box1 {
+    content-align: left top;
+    background: red;
+}
+
+#box2 {
+    content-align: center middle;
+    background: green;
+}
+
+#box3 {
+    content-align: right bottom;
+    background: blue;
+}
+
+Static {
+    height: 1fr;
+    padding: 1;
+    color: white;
+}

docs/examples/styles/content_align.py

@@ -0,0 +1,13 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+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")
+
+
+app = ContentAlignApp(css_path="content_align.css")
+app.run()

docs/examples/styles/scrollbar_gutter.css

@@ -0,0 +1,8 @@
+Screen {
+    scrollbar-gutter: stable;
+}
+
+#text-box {
+    color: floralwhite;
+    background: darkmagenta;
+}

docs/examples/styles/scrollbar_gutter.py

@@ -11,18 +11,8 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 
 class ScrollbarGutterApp(App):
-    CSS = """
-    Screen {
-        scrollbar-gutter: stable;
-    }
-    Static {
-        color: floralwhite;
-        background: darkmagenta;
-    }
-    """
-
     def compose(self):
-        yield Static(TEXT)
+        yield Static(TEXT, id="text-box")
 
 
-app = ScrollbarGutterApp()
+app = ScrollbarGutterApp(css_path="scrollbar_gutter.css")