[!] [=title "Week 4: Style"] [=content-]

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!

Styling on the internet is done with something called Cascading Style Sheets - CSS. CSS is a deceptively simple language responsible for color, size, shape, font, layout, etc - all of the things that make webpages beautiful!

The core of CSS is properties and selectors. All properties have a name, a colon, a value, and a semicolon. For instance, a property to make text red would look like:

    color: red;

CSS can be written in a lot of places. The easiest way is inline properties - you put your CSS properties in the `style` HTML attribute, and they apply automagically! For instance:

    <p style="color: red;">Red Text</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 {
    	color: red;
    }

Note the tag name `p`, the opening brace `{`, the properties (each on their own line!), and the closing brace `}`. CSS is much pickier than HTML, and if you write this wrong, it could break the entire stylesheet!

The effect is that this selects every `p` element on the page and sets its `color` to `red`.

You can't just throw this anywhere! It needs to go in one of a few specific places. The easiest place is a `<style>` tag. For instance:

    <style>
    p {
    	color: red;
    }
    </style>

This is considered metadata, so it must go in your `<head>`.

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:

    <link rel="stylesheet" href="style.css" />

Look familiar? This is another use of the elusive `link` tag!

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:

- `color`: This sets the text color, and only the text color - other color-adjacent properties can be used for other things.
- `background-color`: This sets the color of the background - the full space "behind" an element's content including padding and empty space. Try it on a few different elements!
- `background-image`: Used like `background-image: url("path/to/image.png");` You have to use `url("")` because there are other more advanced types of background image. This just sets the picture to show up behind content.
- `font-family`: Sets the type of font to be used. The actual font will be picked out from a set of default options installed in the user's browser. For instance, `font-family: monospace;` produces robotic text like this. Most of this page uses `font-family: sans-serif;`.
- `padding`: Padding adds some spacing to an element. It makes the outside larger without changing where content is placed. For example, `padding: 10px;` would add 10 pixels of space above, below, and to either side of the content in the element.
- `margin`: Margin is another layer outside padding. Rather than expanding the element, margin prevents other elements from getting too close.
- `border`: 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 `border: 1px solid white;`, which does this.
- `text-align`: This controls the alignment of content. It can be `left`, which is the default, `center`, or `right`.

[/] [#template.html]