Creating Pages 2: Make It Pretty

Cascading Style Sheets (CSS) can be used to change the way pages look.
Put in a .css file and link to in your HTML with a <link> tag:
```
<link rel="stylesheet" href="style.css" />
```
basic CSS parts:
Selectors:
- by tag: h1
- by class: .important, p.aside
- by id: div#menu, #topic1
- contextual (one thing inside another): div#main ul (any <ul> within <div id="main">)
- child (tag that is immediate child of another): ul>li (any <li> directly in a <ul>)
- adjacency (tag after another): h1+p selects a <p> right after an <h1>.
- … and a few more.
Properties and values have been added with new CSS versions.
- CSS1: almost all safe to use.
- After that, be careful with browser compatibility.
- See compatibility tables online.

CSS Box Model

There are two ways to move elements around the page with CSS.
- CSS Positioning and the Box Model
- Absolute, Relative, Fixed Positioning: How Do They Differ?
Float: sounds hard, but is easier.
- float: move an element to the left/right and let other content flow around it.
- clear: move down past anything floating on the left/right/both.
Position: sounds easy, but it tricky to get right.
- static: the default value for position.
- relative: move an element from its “natural” position by using top/bottom/left/right.
- absolute: position relative to the page edges.
- fixed: position and don't move when window scrolls.

Remember that you're always modifying the browser's built-in style.
- These can vary.
- e.g. is an ordered list indented by padding or margin? On the <ol> or the <li>s? All look the same.
CSS reset stylesheets attempt to fix this.
- A Comprehensive Guide to CSS Resets
- Reset Revisited
- They clear all CSS properties.
- Then you have a blank slate to work from, which should be predictable.
- See links.
Even if you don't use a reset, this can save you:
margin: 0; padding: 0;

There are several places where lengths must be given.
- margins, width, font size, …
several units are available:
- in, cm, mm, pt: “real” lengths (1 pt = 1/72 in)
- px: pixels
- em, ex: the font size and half the font size
Be careful with the units!
- The “real” lengths will depend on screen resolution, zoom, etc.
- Pixels are a total lie on phones and very high resolution screens, but make sense when sizing elements for images.
em and ex are reliable and honest.
- They also scale in a way that makes sense.

the three components of web pages:
- (X)HTML: content
- CSS: appearance
- Javascript: behaviour
Logic can be embedded in HTML and will be executed by the user's browser.
- … with the <script> tag.
- Javascript is the only language that is supported by browsers.
Typically, you want to include code from another file:
<script type="text/javascript" src="code.js"></script>
Can also include short code snippets inline:
<script type="text/javascript">…</script>
- Usually worse: no caching benefits.
Javascript code can:
- Manipulate the page it's on.
- Contact the server to get updated info.
- Do whatever a programming language can do.
More later.