Update

css.md

@@ -16,7 +16,7 @@ Back in the boomer web days -- basically before the glorious year 2000 -- there
 
 TODO: more more more
 
-## How It Works
+## How It Works (Now An Actual Mini-Tutorial)
 
 The CSS style can be put into three places:
 
@@ -50,13 +50,42 @@ h1, h2, h3
 
 introduces two rules. One says that all *p* tags (paragraphs) should have blue text color and font that's 20 pixels tall. The second rule says that *h1*, *h2* and *h3* tags (headings) should have red text color. Pretty simple, no?
 
-Tho it can get more complex, especially once you start positioning and aligning stuff -- it takes a while to learn how this really works, but in the end it's no rocket science.
+Tho it can get more complex, especially once you start positioning and aligning stuff (and making it all work on different devices and so on) -- it takes a while to learn how it all works, sometimes you'll encounter quite unintuitive design (for example that center-aligning a fixed-size block is not done with `align` attribute but rather through `margin: auto`). In the end it's not a rocket science, but you won't master CSS overnight. A general advice must be given: **[less is more](less_is_more.md), [keep it simple](kiss.md)!** Try to use only light CSS and a few simple rules, do not go apeshit with the latest and coolest bleeding edge CSS transformations and animations and whatnot, that will only make your site unmaintainable, bloated, slow, incompatible and most likely also annoying. CSS can do a lot and it's tempting to do crazy shit -- if you want something to be 3D spinning and have round corners and be positioned with absolute coordinates, you can do it, but it's not a good idea, please trust this advice.
+
+TIP: "[Modern](modern.md)" [bloated](bloat.md) web browser will typically have built-in so called "dev tools" (often opened with F12) that let you examine any website "under the hood", including visualization of all the CSS blocks and letting you modify them temporarily and in real time. This can help understand CSS much faster.
 
 Now with CSS under our belt it's important to learn about two essential HTML elements we'll sooner or later come to need quite a lot:
 
 - `<span>`: A universal "inline" container. Unlike elements like for example `<b>` and `<p>`, *span* has no meaning from HTML's point of view, it "does nothing", but it's useful for styling. By default span has no distinct style either, it won't affect visual appearance in any way until we explicitly tell it to. We use spans to mark inline things (usually text) so that we can select them with CSS selectors. Let's say we'd like to for instance be able to highlight text on our site with yellow or green colors -- in our CSS style we'll add rules `.yellow { background-color: yellow; } .green { background-color: green; }` and then to actually highlight something we'll be using spans as so: `<p> This is a paragraph. <span class="yellow"> This text is yellow-highlighted. </span> <span class="green"> And this is green. </span> </p>`.
 - `<div>`: A universal "block" container. This is the same as *span*, with the difference that *div* is a block element, i.e. it's not part of the text flow. These are used for things such as navigation menus, images, video players and so on.
 
+It's understandable that a newbie digging through complete documentation of all existing CSS attributes will only end up with a frustrating information overload, and so let us help by picking some of the most important attributes you should check out to start with:
+
+- `background-color`: Color of the element's background, e.g. `background-color: blue`.
+- `background-image`: Sets an image as the element's background, e.g. `background-image: url("images/goatse.jpg")`. To further adjust HOW the image is applied see `background-repeat`, `background-size`, `background-position` etc.
+- `border`: Sets how the element's border is drawn (by default there's usually no border at all). For example: `border: 1px dotted black`. Borders on individual sides can separately be handled through `border-top`, `border-right` etc.
+- `color`: The color of TEXT (i.e. NOT the color of background, as intuition might suggest).
+- `display`: How to draw the element, most common values: `none` (invisible), `inline` (element that "flows in the text") or `block` (element outside text).
+- `font-family`: Chooses text font. The value is a comma-separated list of fonts that will be prioritized from the left, i.e. if desired font is missing, the right one will be tried and so forth. Besides concrete fonts ("Times New Roman", "Helvetica", ...), generic families can (and SHOULD) also be given, such as "sans-serif", "monospace", ... For example: `font-family: Arial, Helvetica, sans-serif`.
+- `font-size`: Size of text, e.g. `font-size: 10pt`.
+- `height`: Sets height of the element. See also `min-height` and `max-height`.
+- `margin`: Sets the gap that will be between this element and other elements, i.e. the OUTSIDE gap. This is similar to `padding`, but padding is for the inside of the element. Margin can be set for each direction (top, right, bottom and left) -- see attribute values below. IMPORTANTLY: setting both left and right margin to `auto` will make the element get aligned in the center (it will automatically position itself so that the left and right gaps are equal).
+- `padding`: Similar to `margin`, but sets the gap that's between the element's border and its INSIDE content.
+- `text-align`: How text will be aligned inside its parent, most common values: `left`, `right`, `center` or `justify` (kinda "block align", the text will be stretched to fill the whole block).
+- `text-decoration`: How the text is decorated, common values: `none`, `underline`, `overline`, `line-through`, ...
+- `width`: Like `height` but for width.
+
+Now the values of these attributes can very often be expressed in various formats, for example colors can be specified with RGB, hex values or English words. Here is a summary of value formats:
+
+- **Keywords** can usually be used, for example `auto` (compute automatically, as in `width: auto`), `inherit` (inherit the value from parent) and so on. Some attributes expect special keywords, e.g. `text-decoration` can be set to `underline`, `overline`, `none` etc.
+- **Sizes** can be expressed in different units, including [pixels](pixels.md) (`px`, as in `width: 160px`), points (`pt`, as in `width: 20pt`) and percents (of the parent's size, `%`, as in `width: 50%`).
+- **[Colors](color.md)** can likewise be written in different formats, including [RGB](rgb.md) (e.g. `color: rgb(255,0,127)`, `rgba` is allowed too), [HSL](hsl.md) (e.g. `color: hsl(55, 30%, 50%)`), [hexadecimal](hex.md) (e.g. `color: #00ff37` or `color: #fc9`) or plain [English](english.md) (e.g. `color: red`).
+- **4 values for each direction** start at the top and go clockwise, while fewer than 4 can also be given (then unspecified directions will take the value of the opposite direction, or whatever remains). For example `margin: 10px 20px 30px 40px` means `10px` on top, `20px` right, `30px` at the bottom and `40px` left. If we'd do `margin: 5px auto`, we'd get `5px` on top and bottom and `auto` on left and right. If we'd do `margin: 10%`, we'd get `10%` in all directions, and so on. It's also possible to expand the attribute with the direction's name, like: `margin-left: 10px`.
+
+Some more advanced attributes to study next are `float`, `clear` (related to `float`) and `position` (related to `left`, `right`, `top` and `bottom` attributes).
+
+Oh dear, that's not nearly everything. Next check out pseudo elements and pseudo classes. For example `.mydiv:hover` will match anything with class `mydiv`, but ONLY if the mouse cursor is over it. `p:first-child` will select only those `p` elements that are first children of their parents. And so on and so forth.
+
 TODO: moar
 
 ## CSS Gore And Pissing People Off