add styling/nested components

site/content/tutorial/01-introduction/04-styling/App.svelte

@@ -0,0 +1,5 @@
+<style>
+	/* styles goes here */
+</style>
+
+<p>This is a paragraph.</p>

site/content/tutorial/01-introduction/04-styling/text.md

@@ -0,0 +1,19 @@
+---
+title: Styling
+---
+
+Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+
+```html
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>This is a paragraph.</p>
+```
+
+Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.

site/content/tutorial/01-introduction/04-todo/text.md

@@ -1,9 +0,0 @@
----
-title: TODO
----
-
-* write the rest of the tutorial
-* change the orientation of the REPL, so that it's editor on top, result on bottom
-* remove the props editor. it's superfluous in this context
-* add an 'open this in REPL' button that takes you to the full REPL
-* figure out wtf to do on mobile

site/content/tutorial/01-introduction/05-nested-components/App.svelte

@@ -0,0 +1,9 @@
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>This is a paragraph.</p>

site/content/tutorial/01-introduction/05-nested-components/Nested.svelte

@@ -0,0 +1 @@
+<p>This is another paragraph.</p>

site/content/tutorial/01-introduction/05-nested-components/text.md

@@ -0,0 +1,22 @@
+---
+title: Nested components
+---
+
+It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.
+
+Add a `<script>` tag that imports `Nested.svelte`...
+
+```html
+<script>
+	import Nested from './Nested.svelte';
+</script>
+```
+
+...then add it to the markup:
+
+```html
+<p>This is a paragraph.</p>
+<Nested/>
+```
+
+Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.

site/content/tutorial/01-introduction/99-todo/text.md

@@ -0,0 +1,7 @@
+---
+title: TODO
+---
+
+* write the rest of the tutorial
+* add an 'open this in REPL' button that takes you to the full REPL
+* figure out wtf to do on mobile