Tyler Clarke
0ce859a50e
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 25s
23 lines
903 B
HTML
23 lines
903 B
HTML
[!]
|
|
[=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><link rel="stylesheet" href="style.css" /></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]
|