diff --git a/documentation/docs/03-template-syntax/15-class-and-style.md b/documentation/docs/03-template-syntax/15-class-and-style.md
deleted file mode 100644
index 755c47addb..0000000000
--- a/documentation/docs/03-template-syntax/15-class-and-style.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: class: and style:
----
-
-Coming soon!
diff --git a/documentation/docs/03-template-syntax/15-class.md b/documentation/docs/03-template-syntax/15-class.md
new file mode 100644
index 0000000000..cecbc7cf20
--- /dev/null
+++ b/documentation/docs/03-template-syntax/15-class.md
@@ -0,0 +1,23 @@
+---
+title: class:
+---
+
+The `class:` directive is a convenient way to conditionally set classes on elements, as an alternative to using conditional expressions inside `class` attributes:
+
+```svelte
+<!-- These are equivalent -->
+<div class={isCool ? 'cool' : ''}>...</div>
+<div class:cool={isCool}>...</div>
+```
+
+As with other directives, we can use a shorthand when the name of the class coincides with the value:
+
+```svelte
+<div class:cool>...</div>
+```
+
+Multiple `class:` directives can be added to a single element:
+
+```svelte
+<div class:cool class:lame={!cool} class:potato>...</div>
+```
diff --git a/documentation/docs/03-template-syntax/16-style.md b/documentation/docs/03-template-syntax/16-style.md
new file mode 100644
index 0000000000..749376c6e2
--- /dev/null
+++ b/documentation/docs/03-template-syntax/16-style.md
@@ -0,0 +1,41 @@
+---
+title: style:
+---
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```svelte
+<!-- These are equivalent -->
+<div style:color="red">...</div>
+<div style="color: red;">...</div>
+```
+
+The value can contain arbitrary expressions:
+
+```svelte
+<div style:color={myColor}>...</div>
+```
+
+The shorthand form is allowed:
+
+```svelte
+<div style:color>...</div>
+```
+
+Multiple styles can be set on a single element:
+
+```svelte
+<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
+```
+
+To mark a style as important, use the `|important` modifier:
+
+```svelte
+<div style:color|important="red">...</div>
+```
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```svelte
+<div style="color: blue;" style:color="red">This will be red</div>
+```