more docs

docs/styles/background.md

@@ -0,0 +1,41 @@
+# Background
+
+The `background` rule sets the background color of the widget.
+
+=== "background.py"
+
+    ```python
+    --8<-- "docs/examples/styles/background.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/background.py"}
+    ```
+
+## CSS
+
+```sass
+/* Blue background */
+background: blue;
+
+/* 20% red backround */
+background: red 20%;
+
+/* RGB color */
+background: rgb(100,120,200);
+```
+
+## Python
+
+You can use the same syntax as CSS, or explicitly set a Color object.
+
+```python
+# Set blue background
+widget.styles.background = "blue"
+
+from textual.color import Color
+# Set with a color object
+widget.styles.background = Color.parse("pink")
+
+```

docs/styles/color.md

@@ -0,0 +1,41 @@
+# Color
+
+The `color` rule sets the text color of a Widget.
+
+=== "color.py"
+
+    ```python
+    --8<-- "docs/examples/styles/color.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/color.py"}
+    ```
+
+## CSS
+
+```sass
+/* Blue background */
+color: blue;
+
+/* 20% red backround */
+color: red 20%;
+
+/* RGB color */
+color: rgb(100,120,200);
+```
+
+## Python
+
+You can use the same syntax as CSS, or explicitly set a Color object.
+
+```python
+# Set blue background
+widget.styles.color = "blue"
+
+from textual.color import Color
+# Set with a color object
+widget.styles.color = Color.parse("pink")
+
+```

docs/styles/height.md

@@ -1,6 +1,6 @@
 # Height
 
-The `height` property sets a widget's height. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
+The `height` style sets a widget's height. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
 
 ## Example
 

docs/styles/margin.md

@@ -0,0 +1,34 @@
+# Margin
+
+The `margin` rule adds space around the entire widget.
+
+- `1` Sets a margin of 1 around all 4 edges
+- `1 2` Sets a margin of 1 on the top and bottom edges, and a margin of 2 on the left and right edges
+- `1 2 3 4` Sets a margin of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
+
+## Example
+
+=== "margin.py"
+
+    ```python
+    --8<-- "docs/examples/styles/margin.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/margin.py"}
+    ```
+
+## CSS
+
+```sass
+/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
+margin: 2 4;
+```
+
+## Python
+
+```python
+# In Python you can set the margin as a tuple of integers
+widget.styles.margin = (2, 3)
+```

docs/styles/padding.md

@@ -0,0 +1,34 @@
+# Padding
+
+The padding rule adds space around the content of a widget. You can specify padding with 1, 2 or 4 numbers.
+
+- `1` Sets a padding of 1 around all 4 edges
+- `1 2` Sets a padding of 1 on the top and bottom edges, and a padding of two on the left and right edges
+- `1 2 3 4` Sets a padding of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
+
+## Example
+
+=== "padding.py"
+
+    ```python
+    --8<-- "docs/examples/styles/padding.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/padding.py"}
+    ```
+
+## CSS
+
+```sass
+/* Set padding of 2 on the top and bottom edges, and 4 on the left and right */
+padding: 2 4;
+```
+
+## Python
+
+```python
+# In Python you can set the padding as a tuple of integers
+widget.styles.padding = (2, 3)
+```

docs/styles/text_style.md

@@ -0,0 +1,36 @@
+# Text-style
+
+The `text-style` rule enables a number of different ways of displaying text. The value may be set to any of the following:
+
+- `"bold"` Sets **bold text**
+- `"italic"` Sets _italic text_
+- `"reverse"` Sets reverse video text (foreground and background colors reversed)
+- `"underline"` Sets <u>underline text</u>
+- `"strike"` Sets <s>strikethrough text</s>
+
+Text styles may be set in combination. For example "bold underline" or "reverse underline strike".
+
+## Example
+
+=== "text_style.py"
+
+    ```python
+    --8<-- "docs/examples/styles/text_style.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/text_style.py"}
+    ```
+
+## CSS
+
+```sass
+text-style: italic;
+```
+
+## Python
+
+```python
+widget.styles.text_style = "italic"
+```

docs/styles/visibility.md

@@ -0,0 +1,48 @@
+# Visibility
+
+The `visibility` rule may be used to make a widget invisible while still reserving spacing for it. The default value is `"visible"` which will cause the Widget to be displayed as normal. Setting the value to `"hidden"` will cause the Widget to be removed from the screen.
+
+## Example
+
+Note that the second widget is hidden, while leaving a space where it would have been rendered.
+
+=== "visibility.py"
+
+    ```python
+    --8<-- "docs/examples/styles/visibility.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/visibility.py"}
+    ```
+
+## CSS
+
+```sass
+/* Widget is on screen */
+visibility: visible;
+
+/* Widget is not on the screen */
+visibility: hidden;
+```
+
+## Python
+
+```python
+# Widget is invisible
+self.styles.visibility = "hidden"
+
+# Widget is visible
+self.styles.visibility = "visible"
+```
+
+There is also a shortcut to set a Widget's visibility. The `visible` property on `Widget` may be set to `True` or `False`.
+
+```python
+# Make a widget invisible
+widget.visible = False
+
+# Make the widget visible again
+widget.visible = True
+```

docs/styles/width.md

@@ -1,6 +1,6 @@
 # Width
 
-The `width` property sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
+The `width` style sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
 
 ## Example