w3

site/introwebdev/week-3-link-style.html

@@ -0,0 +1,22 @@
+[!]
+[=title "Linked Styles"]
+[=content -]
+<p>
+	So far our CSS has been entirely in the <code>style</code> tag.
+	However, this is very clunky - for larger multipage websites,
+	you'd have to copy/paste all the styles to all of them! There is a better way.
+</p>
+<p>
+	You can actually store all of your styles in a <code>.css</code> file (common names are <code>main.css</code>, <code>style.css</code>, etc, but you can pick whatever!)
+	and add them to pages with a <i>link</i> - just like a favicon. It looks like this:
+</p>
+<pre><code>&lt;link rel="stylesheet" href="style.css" /&gt;</code></pre>
+<p>
+	Make sure to put it in your header, because it is metadata.
+</p>
+<p>
+	Linked stylesheets are much cleaner than <code>style</code> tags (this is called "separation of concerns")
+	and can be linked to multiple pages, allowing you to define a single style for the entire website.
+</p>
+[/]
+[#template.html]