[docs] style directive tutorial (#7161)

site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte

@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>

site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte

@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>

site/content/tutorial/13-advanced-styling/03-inline-styles/text.md

@@ -0,0 +1,10 @@
+---
+title: Inline styles
+---
+
+Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
+
+Add the following style attribute to the paragraph element:
+`style="color: {color}; --opacity: {bgOpacity};"`
+
+Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.

site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte

@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>

site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte

@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? "#000" : "#fff";
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>

site/content/tutorial/13-advanced-styling/04-style-directive/text.md

@@ -0,0 +1,18 @@
+---
+title: The style directive
+---
+
+Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
+
+Change the style attribute of the paragraph to the following:
+
+```html
+<p 
+	style:color 
+	style:--opacity="{bgOpacity}"
+>
+```
+
+The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
+
+Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.

site/content/tutorial/13-advanced-styling/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Advanced styling"
+}