added tint and offset

docs/examples/styles/offset.py

@@ -0,0 +1,46 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class OffsetApp(App):
+    CSS = """  
+    Screen {
+        background: white;
+        color: black;
+        layout: horizontal;
+    }
+    Static {             
+        width: 20;
+        height: 10;
+        content-align: center middle; 
+    }
+
+    .paul {
+        offset: 8 2;
+        background: red 20%;
+        border: outer red;
+        color: red;
+    }
+
+    .duncan {
+        offset: 4 10;
+        background: green 20%;
+        border: outer green;
+        color: green;
+    }
+
+    .chani {
+        offset: 0 5;
+        background: blue 20%;
+        border: outer blue;
+        color: blue;
+    }
+    """
+
+    def compose(self):
+        yield Static("Paul", classes="paul")
+        yield Static("Duncan", classes="duncan")
+        yield Static("Chani", classes="chani")
+
+
+app = OffsetApp()

docs/examples/styles/tint.py

@@ -5,9 +5,6 @@ from textual.widgets import Static
 
 class TintApp(App):
     CSS = """    
-    Screen {
-        background: green;
-    }
     Static {             
         height: 3;
         text-style: bold;

docs/styles/offset.md

@@ -0,0 +1,30 @@
+# Offset
+
+The `offset` rule adds an offset to the widget's position.
+
+## Example
+
+=== "offset.py"
+
+    ```python
+    --8<-- "docs/examples/styles/offset.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/offset.py"}
+    ```
+
+## CSS
+
+```sass
+/* Move the widget 2 cells in the x direction, and 4 in the y direction. */
+offset: 2 4;
+```
+
+## Python
+
+```python
+# Move the widget 2 cells in the x direction, and 4 in the y direction.
+widget.styles.offset = (2, 4)
+```