1. ID and class selectors
1.1. # selects an ID, for very specifc elements
1.2. . selects a class, for groups
1.2.1. p.center selector applies a style to all paragraphs that received the center class
2. Backgrounds
2.1. background-repeat controls repeating
2.1.1. repeat-x will only repeat horizontally
2.2. attachment controls whether bg stays fixed or scrolls with the rest of the page
2.2.1. fixed will avoid scrolling
3. Font
3.1. There's a difference between a "generic family" and a "font family"
3.1.1. Sans-Serif is a generic family, as it can cover any sans serif font
3.1.2. Arial is a font family, within the generic family of sans serif fonts
4. Links
4.1. Links can be styled according to the state they are in.
4.1.1. a:visited, a:hover, ...
4.1.2. this is a special case of so called pseudo classes
5. Table
5.1. By default, a table has double borders. this is because both the table and the th/td elements have separate borders. to avoid this, use the border-collapse element
5.1.1. border-collapse:collapse;
5.2. padding on a td selector controls the space between the cell content and the border. This is no different from other elements in the CSS box model
6. Box Model
6.1. Width determines width of the content area
6.2. To calculate total width, you need to add padding, border and margins
7. Outline
7.1. Outline is an extra decoration outside the border, but still inside margin
8. Margin
8.1. Short hand can have one to four values
8.1.1. one: margin on all sides
8.1.2. two: top&bottom and left&right
8.1.3. three: top, left&right, bottom
8.1.4. four: top, right, bottom, left
9. Nesting Selectors
9.1. after declaring a class selector, you can define other elements within that class
9.1.1. .marked p will only apply style to paragraphs within a .marked class
10. Display
10.1. "none" can be used to hide elements
10.2. "block" elements take up the full available width and come with a line break before and after. examples include h1, p, div
10.3. "inline" elements only take the width they need and do not force linebreaks, like span, a
11. Positioning
11.1. the default behaviour of an element is "static", e.g. unaffected by top, bottom etc
11.2. "fixed" will lock the element relative to a position relative to the browser window. It won't move even with scrolling.
11.3. "relative" will position the element relative to its own normal position. Negative values are allowed
11.4. "absolute" puts an element anywhere you want, and will remove the element from the normal flow of the page
11.4.1. If elements go outside the normal flow, they can overlap with other elements. In this case, the z-index variable controls if the element is in front or behind another one.