diff --git a/docs/examples/light_dark.py b/docs/examples/light_dark.py
index feb542d44..8cd3cd78c 100644
--- a/docs/examples/light_dark.py
+++ b/docs/examples/light_dark.py
@@ -17,4 +17,5 @@ class ButtonApp(App):
 
     def handle_pressed(self, event):
         self.dark = not self.dark
+        self.bell()
         event.button.label = "Lights ON" if self.dark else "Lights OFF"
diff --git a/docs/examples/styles/README.md b/docs/examples/styles/README.md
new file mode 100644
index 000000000..8c8043582
--- /dev/null
+++ b/docs/examples/styles/README.md
@@ -0,0 +1,9 @@
+These are the examples from the documentation, used to generate screenshots.
+
+You can run them with the textual CLI.
+
+For example:
+
+```
+textual run text_style.py
+```
diff --git a/docs/examples/styles/border.py b/docs/examples/styles/border.py
index 958976939..9c36c6d45 100644
--- a/docs/examples/styles/border.py
+++ b/docs/examples/styles/border.py
@@ -4,6 +4,9 @@ from textual.widgets import Static
 
 class BorderApp(App):
     CSS = """
+    Screen {
+        background: white;
+    }
     Screen > Static {
         height:5;
         content-align: center middle;
@@ -13,14 +16,18 @@ class BorderApp(App):
     }    
     #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;
     }
     """
diff --git a/docs/examples/styles/margin.py b/docs/examples/styles/margin.py
index c7aec1dfe..6e5a3c59a 100644
--- a/docs/examples/styles/margin.py
+++ b/docs/examples/styles/margin.py
@@ -12,10 +12,16 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class MarginApp(App):
     CSS = """
+
+    Screen {
+        background: white;
+        color: black;
+    }
    
     Static {
         margin: 4 8;  
         background: blue 20%;  
+        border: blue wide;
     }    
     
     """
diff --git a/docs/examples/styles/overflow.py b/docs/examples/styles/overflow.py
new file mode 100644
index 000000000..560541170
--- /dev/null
+++ b/docs/examples/styles/overflow.py
@@ -0,0 +1,44 @@
+from textual.app import App
+from textual.widgets import Static
+from textual.layout import Horizontal, Vertical
+
+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 OverflowApp(App):
+    CSS = """
+    Screen {
+        background: $background;
+        color: black;
+    }
+   
+    Vertical {
+        width: 1fr;
+    }
+
+    Static {
+        margin: 1 2;  
+        background: blue 20%;  
+        border: blue wide;
+        height: auto;
+    }    
+
+    #right {
+        overflow-y: hidden;
+    }
+    """
+
+    def compose(self):
+        yield Horizontal(
+            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="left"),
+            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="right"),
+        )
+
+
+app = OverflowApp()
diff --git a/docs/examples/styles/padding.py b/docs/examples/styles/padding.py
index 8b345514b..b65606cf1 100644
--- a/docs/examples/styles/padding.py
+++ b/docs/examples/styles/padding.py
@@ -12,6 +12,11 @@ Where the fear has gone there will be nothing. Only I will remain."""
 
 class PaddingApp(App):
     CSS = """
+
+    Screen {
+        background: white;
+        color: blue;
+    }
    
     Static {
         padding: 4 8;  
diff --git a/docs/styles/max_height.md b/docs/styles/max_height.md
new file mode 100644
index 000000000..dcf10193e
--- /dev/null
+++ b/docs/styles/max_height.md
@@ -0,0 +1,25 @@
+# Max-height
+
+The `max-height` rule sets a maximum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a maximum height of 10 rows */
+max-height: 10;
+
+/* Set a maximum height of 25% of the screen height */
+max-height: 25vh;
+```
+
+## Python
+
+```python
+# Set the maximum width to 10 rows
+widget.styles.max_height = 10
+
+# Set the maximum width to 25% of the screen width
+widget.styles.max_height = "25vw"
+
+```
diff --git a/docs/styles/max_width.md b/docs/styles/max_width.md
new file mode 100644
index 000000000..deac40f97
--- /dev/null
+++ b/docs/styles/max_width.md
@@ -0,0 +1,25 @@
+# Max-width
+
+The `max-width` rule sets a maximum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a maximum width of 10 cells */
+max-width: 10;
+
+/* Set a maximum width of 25% of the screen width */
+max-width: 25vh;
+```
+
+## Python
+
+```python
+# Set the maximum width to 10 cells
+widget.styles.max_width = 10
+
+# Set the maximum width to 25% of the screen width
+widget.styles.max_width = "25vw"
+
+```
diff --git a/docs/styles/min_height.md b/docs/styles/min_height.md
new file mode 100644
index 000000000..51426e397
--- /dev/null
+++ b/docs/styles/min_height.md
@@ -0,0 +1,25 @@
+# Min-height
+
+The `min-height` rule sets a minimum height for a widget.
+
+## CSS
+
+```sass
+
+/* Set a minimum height of 10 rows */
+min-height: 10;
+
+/* Set a minimum height of 25% of the screen height */
+min-height: 25vh;
+```
+
+## Python
+
+```python
+# Set the minimum height to 10 rows
+self.styles.min_height = 10
+
+# Set the minimum height to 25% of the screen height
+self.styles.min_height = "25vh"
+
+```
diff --git a/docs/styles/min_width.md b/docs/styles/min_width.md
new file mode 100644
index 000000000..b6a4cf2c3
--- /dev/null
+++ b/docs/styles/min_width.md
@@ -0,0 +1,25 @@
+# Min-width
+
+The `min-width` rules sets a minimum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a minimum width of 10 cells */
+min-width: 10;
+
+/* Set a minimum width of 25% of the screen width */
+min-width: 25vh;
+```
+
+## Python
+
+```python
+# Set the minimum width to 10 cells
+widget.styles.min_width = 10
+
+# Set the minimum width to 25% of the screen height
+widget.styles.min_width = "25vh"
+
+```
diff --git a/docs/styles/overflow.md b/docs/styles/overflow.md
new file mode 100644
index 000000000..752ac2f64
--- /dev/null
+++ b/docs/styles/overflow.md
@@ -0,0 +1,50 @@
+# Overflow
+
+The `overflow` rule specifies if and when scrollbars should be displayed on the `x` and `y` axis. There are two values for each scrollbar, which may be set together or independently to one of the follow three values:
+
+- `"auto"` Automatically show the scrollbar if the content doesn't fit
+- `"hidden"` Never show the scrollbar
+- `"scroll"` Always show the scrollbar
+
+The default is "auto" which will show the scrollbar if content doesn't fit within container, otherwise the scrollbar will be hidden.
+
+## Example
+
+Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal.
+
+The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The right side has `overflow-y: hidden` which will prevent a scrollbar from being show.
+
+=== "width.py"
+
+    ```python
+    --8<-- "docs/examples/styles/overflow.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/overflow.py"}
+    ```
+
+## CSS
+
+```sass
+/* Automatic scrollbars on both axies (the default) */
+overflow: auto auto;
+
+/* Hide the vertical scrollbar */
+overflow-y: hidden;
+
+/* Always show the horizontal scrollbar */
+overflow-x: scroll;
+```
+
+## Python
+
+```python
+# Hide the vertical scrollbar
+self.styles.overflow_y = "hidden"
+
+# Always show the horizontal scrollbar
+self.styles.overflow_x = "scroll"
+
+```
diff --git a/mkdocs.yml b/mkdocs.yml
index a5298665c..20713abbf 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -14,8 +14,13 @@ nav:
     - "styles/background.md"
     - "styles/color.md"
     - "styles/display.md"
+    - "styles/min_height.md"
+    - "styles/max_height.md"
+    - "styles/min_width.md"
+    - "styles/max_width.md"
     - "styles/height.md"
     - "styles/margin.md"
+    - "styles/overflow.md"
     - "styles/padding.md"
     - "styles/text_style.md"
     - "styles/visibility.md"