Tyler Clarke
b5aa99b64a
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 26s
81 lines
4.3 KiB
HTML
81 lines
4.3 KiB
HTML
[!]
|
|
[=title "Week 4: Style"]
|
|
[=content-]
|
|
<p>
|
|
We've done some pretty cool stuff with HTML so far, but there's still a barrier between that and
|
|
all of the wonderful websites you know. We need styles!
|
|
</p>
|
|
<p>
|
|
Styling on the internet is done with something called <i>Cascading Style Sheets</i> - CSS.
|
|
CSS is a deceptively simple language responsible for color, size, shape, font, layout, etc - all of the things that make webpages beautiful!
|
|
</p>
|
|
<p>
|
|
The core of CSS is <i>properties</i> and <i>selectors</i>. All properties have a name, a colon, a value, and a semicolon. For instance,
|
|
a property to make text red would look like:
|
|
</p>
|
|
<pre><code>color: red;
|
|
</code></pre>
|
|
<p>
|
|
CSS can be written in a lot of places. The easiest way is <i>inline properties</i> - you put your CSS properties in the <code>style</code>
|
|
HTML attribute, and they apply automagically! For instance:
|
|
</p>
|
|
<pre><code><p style="color: red;">Red Text</p>
|
|
</code></pre>
|
|
<p>
|
|
This will set the color of that one specific p element to red. It will not set the color of any other elements; for that, you need a selector!
|
|
A selector looks like this:
|
|
</p>
|
|
<pre><code>p {
|
|
color: red;
|
|
}
|
|
</code></pre>
|
|
<p>
|
|
Note the tag name <code>p</code>, the opening brace <code>{</code>,
|
|
the properties (each on their own line!), and the closing brace <code>}</code>. CSS is much pickier than HTML,
|
|
and if you write this wrong, it could break the entire stylesheet!
|
|
</p>
|
|
<p>
|
|
The effect is that this <i>selects</i> every <code>p</code> element on the page and sets its <code>color</code> to <code>red</code>.
|
|
</p>
|
|
<p>
|
|
You can't just throw this anywhere! It needs to go in one of a few specific places. The easiest place is a <code><style></code> tag. For instance:
|
|
</p>
|
|
<pre><code><style>
|
|
p {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</code></pre>
|
|
<p>
|
|
This is considered <i>metadata</i>, so it must go in your <code><head></code>.
|
|
</p>
|
|
<p>
|
|
You can (and should!) also store your CSS in an external file with the ".css" extension - e.g., "style.css" is common.
|
|
This can then be referenced in your HTML document's header like this:
|
|
</p>
|
|
<pre><code><link rel="stylesheet" href="style.css" />
|
|
</code></pre>
|
|
<p>
|
|
Look familiar? This is another use of the elusive <code>link</code> tag!
|
|
</p>
|
|
<p>
|
|
There are very, very many CSS properties. I can't hope to exhaustively list them (and indeed I don't know all of them!)
|
|
but here are a few common ones:
|
|
</p>
|
|
<ul>
|
|
<li><code>color</code>: This sets the <i>text color</i>, and <i>only</i> the text color - other color-adjacent properties can be used for other things.</li>
|
|
<li><code>background-color</code>: This sets the color of the <i>background</i> - the full space "behind" an element's content including padding and empty space. Try it on a few different elements!</li>
|
|
<li><code>background-image</code>: Used like <code>background-image: url("path/to/image.png");</code> You have to use <code>url("")</code> because there are other more advanced
|
|
types of background image. This just sets the picture to show up behind content.</li>
|
|
<li><code>font-family</code>: Sets the <i>type of font</i> to be used. The actual font will be picked out from a set of default options installed in the user's browser. For instance,
|
|
<code>font-family: monospace;</code> produces robotic text <span style="font-family: monospace;">like this</span>. Most of this page uses <code>font-family: sans-serif;</code>.</li>
|
|
<li><code>padding</code>: Padding adds some spacing to an element. It makes the outside larger without changing where content is placed. For example, <code>padding: 10px;</code>
|
|
would add 10 pixels of space above, below, and to either side of the content in the element.</li>
|
|
<li><code>margin</code>: Margin is another layer outside padding. Rather than expanding the element, margin prevents <i>other</i> elements from getting too close.</li>
|
|
<li><code>border</code>: Border is a styled layer between padding and margin! It's usually thin and used to add highlighting. It's a fairly complicated property, with 3 terms instead of just 1:
|
|
a common example is <code>border: 1px solid white;</code>, which <span style="border: 1px solid white;">does this</span>.
|
|
<li><code>text-align</code>: This controls the alignment of content. It can be <code>left</code>, which is the default, <code>center</code>, or <code>right</code>.</li>
|
|
</ul>
|
|
[/]
|
|
[#template.html]
|