styles docs

docs/guide/styles.md

@@ -1,5 +1,24 @@
 # Styles
 
+Textual provides a large number of *styles* you can use to customize how your app looks and feels. In this chapter will will look at how you can edit styles in your applications.
+
+
+## Styles object
+
+Every widget class in Textual provides a `styles` object which contains a number of writable attributes. Styles define the position and size of a widget, in addition to color, text style, borders, alignment and much more.
+
+
+
+## Box Model
+
+
+<div class="excalidraw">
+--8<-- "docs/images/styles/box.excalidraw.svg"
+</div>
+
+
+
+
 TODO: Styles docs
 
 - What are styles
@@ -10,6 +29,3 @@ TODO: Styles docs
 - Borders / Outline
 
 
-<div class="excalidraw">
---8<-- "docs/images/styles/box.excalidraw.svg"
-</div>