docs

docs/styles/display.md

@@ -0,0 +1,48 @@
+# Display
+
+The `display` property defines if a Widget is displayed or not. The default value is `"block"` which will display the widget as normal. Setting the property to `"none"` will effectively make it invisible.
+
+## Example
+
+Note that the second widget is hidden by adding the "hidden" class which sets the display style to None.
+
+=== "display.py"
+
+    ```python
+    --8<-- "docs/examples/styles/display.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/display.py"}
+    ```
+
+## CSS
+
+```sass
+/* Widget is on screen */
+display: block;
+
+/* Widget is not on the screen */
+display: none;
+```
+
+## Python
+
+```python
+# Hide the widget
+self.styles.display = "none"
+
+# Show the widget again
+self.styles.display = "block"
+```
+
+There is also a shortcut to show / hide a widget. The `display` property on `Widget` may be set to `True` or `False` to show or hide the widget.
+
+```python
+# Hide the widget
+widget.display = False
+
+# Show the widget
+widget.display = True
+```

docs/styles/height.md

@@ -0,0 +1,37 @@
+# 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.
+
+## Example
+
+=== "width.py"
+
+    ```python
+    --8<-- "docs/examples/styles/height.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/height.py"}
+    ```
+
+## CSS
+
+```sass
+/* Explicit cell height */
+height: 10;
+
+/* Percentage height */
+height: 50%;
+
+/* Automatic height */
+width: auto
+```
+
+## Python
+
+```python
+self.styles.height = 10
+self.styles.height = "50%
+self.styles.height = "auto"
+```