Update

css.md

@@ -20,9 +20,9 @@ TODO: more more more
 
 The CSS style can be put into three places:
 
-- **separate file** (external CSS): Here the style is written in its own file with *.css* extension and any HTML file wanting to use the style links to this file (with *link* tag inside *head*). This is good if you have multiple HTML files (i.e. a whole website) that use the same style.
+- **separate file** (external CSS): Here the style resides in its own file with *.css* extension and any HTML file wishing to use it links to this specific file (with *link* tag inside *head*, e.g. `<link rel="stylesheet" href="style.css">`). This is good if you have multiple HTML files (i.e. a whole website) that use the same style.
 - **inside the HTML file itself** (internal CSS): The style is written right inside the same file as the HTML document, between *style* tags in *head*, so it's all nicely self contained. This is good if the style is used only by this one HTML document (e.g. you have a single webpage or some special page that just has its own style).
-- **inside HTML tags** (inline CSS): Style can be specified also as HTML tag attributes (the *style* attribute), but this is discouraged as it intermixes HTML and CSS, something CSS wants to avoid.
+- **inside HTML tags** (inline CSS): Style can be given also as HTML tag attribute (named *style*, e.g. `<p style="color: red;"> hello </p>`), but this is discouraged as we're once again intermixing definition of structure and visual style, something that CSS wanted to eliminate in the first place.
 
 The style itself is quite simple, it's just a list of styling rules, each one in format:
 
@@ -33,7 +33,7 @@ selectors
 }
 ```
 
-Here *selectors* says which elements the rule applies to and *style* defines the visual attributes we want to define. For example
+Here *selectors* say which elements the rule applies to and *style* defines the visual attributes. For example
 
 ```
 p
@@ -48,9 +48,14 @@ h1, h2, h3
 }
 ```
 
-Specifies 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?
+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 when you start positioning and aligning things -- 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 -- it takes a while to learn how this really works, but in the end it's no rocket science.
+
+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.
 
 TODO: moar