From c464d0acba1f791a2f9e8a9fa2ee677bd8c75bd6 Mon Sep 17 00:00:00 2001
From: gtm-nayan <gtmnayan@gmail.com>
Date: Sun, 20 Feb 2022 19:57:56 +0545
Subject: [PATCH] Style directive tutorial

---
 .../03-inline-styles/app-a/App.svelte         | 15 +++++++++++++
 .../03-inline-styles/app-b/App.svelte         | 15 +++++++++++++
 .../03-inline-styles/text.md                  | 21 +++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/text.md

diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
new file mode 100644
index 0000000000..57547c8ca9
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let backgroundOpacity = 0.5;
+	$: color = backgroundOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={backgroundOpacity} />
+
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--o));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
new file mode 100644
index 0000000000..dc0e561d16
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let backgroundOpacity = 0.5;
+	$: color = backgroundOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={backgroundOpacity} />
+
+<p style:color style:--o={backgroundOpacity}>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--o));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
new file mode 100644
index 0000000000..8f4d6de255
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
@@ -0,0 +1,21 @@
+---
+title: Inline styles and the style directive
+---
+
+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}; --o: {backgroundOpacity};"`
+
+Great, now you can style the paragraph using variables that can change based on your input and you don't have to make a class for every possible value.
+
+There is a way to make this look nicer though, and that is to use the style directive.
+
+```html
+<p 
+	style:color 
+	style:--o={backgroundOpacity}
+>
+```
+
+Not only that but just like 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`.
\ No newline at end of file