[!]
[=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]