diff --git a/docs/languages/css/css.md b/docs/languages/css/css.md
index 4366e95..1cbd032 100644
--- a/docs/languages/css/css.md
+++ b/docs/languages/css/css.md
@@ -4,59 +4,38 @@
 
 ### Inline CSS
 
-```html linenums="1"
+The style only applies to one element at a time.
+
+```html
 <tag style="property:value"></tag>
 ```
 
-Uses the HTML style attribute.  
-Only applies to one element at a time.  
-Not recommended except in cases where choices are constrained.
-
 ### Embedded CSS
 
-```html linenums="1"
-<head>
-    <style>
-        selector {
-            property: value;
-            /* box and display */
-            /* alignment, position */
-            /* margin, border, padding */
-            /* max/min height-width*/
+The style is not shared but only applies to one HTML file.
 
-            /* colors */
-
-            /* font */
-            /* text alignment */
-            }
-    </style>
-</head>
+```html
+<style>
+    selector {
+        property: value;
+    }
+</style>
 ```
 
-Inside `<head>` element.  
-Uses `<style>` tag.  
-Style not shared, only applies to one HTML file.  
-Not Recommended, only use when the number of rules is small and there are constraints on using an external CSS file.
-
 ### External CSS
 
-```html linenums="1"
-<head>
-    <link rel="stylesheet" href="style.css">
-</head>
+- Shared resource, can be referenced from multiple pages.  
+- Can be cached, reduced HTML file size & bandwidth.  
+
+```html
+<link rel="stylesheet" href="style.css">
 ```
 
-Shared resource, can be referenced from multiple pages.  
-Can be cached, reduced HTML file size & bandwidth.  
-Easier to maintain, especially in larger projects.
+## [CSS Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
 
-## Selectors
-
-The selector points to the html element to style.
-
-```css linenums="1"
-selector {property: value; property: value}
+A CSS selector points to an html element to style.
 
+```css
 selector {
     property: value;
     property: value;
@@ -65,53 +44,49 @@ selector {
 
 ### Multiple Selectors
 
-```css linenums="1"
-selector1, selector2 {property: value;}
+```css
+selector1, selector2 { property: value; }
 ```
 
 ### Nested Selectors
 
-Used to select tags nested inn other tags.
+Used to select tags nested in other tags.
 
-```css linenums="1"
-outerSelector innerSelector {property: value;}
+```css
+outerSelector innerSelector { property: value; }
 ```
 
 ### ID Selector
 
-Should apply to one element on a page.
+Can only apply to one element in a page.
 
-```css linenums="1"
-#selector {property: value;}    /* selects <tag id="selector"> */
+```css
+#selector { property: value; }    /* selects <tag id="selector"> */
 ```
 
 ### Class Selector
 
 Many elements can have the same class, classes are used to group HTML elements together.
 
-```css linenums="1"
-.selector {property: value;}    /* selects <tag class="selector"> */
+```css
+.selector { property: value; }    /* selects <tag class="selector"> */
 ```
 
 ### Universal Selector
 
-```css linenums="1"
-* {property: value;}    /* selects every HTML element */
+```css
+* { property: value; }    /* selects every HTML element */
 ```
 
-## Relational Selector
-
-A CSS selector  can contain more than one basic selector.  
-
 ### Descendant selector (space)
 
 Selects an element that resides anywhere within an identified ancestor element.
 
-```css linenums="1"
+```css
 article h2 { property: value; }
 ```
 
-```html linenums="1"
+```html
 <!-- Will NOT match -->
 <h2>title</h2>
 <article>
@@ -124,15 +99,15 @@ article h2 { property: value; }
 </article>
 ```
 
-### Direct child selector (>)
+### Direct child selector (`>`)
 
 Selects an elements that resides immediately inside an identified parent element.
 
-```css linenums="1"
+```css
 article > p { property: value; }
 ```
 
-```html linenums="1"
+```html
 <!-- Will NOT match -->
 <p>Lorem ipsum dolor sit amet</p>
 <article>
@@ -145,16 +120,16 @@ article > p { property: value; }
 </article>
 ```
 
-### General sibling selector (~)
+### General sibling selector (`~`)
 
 Selects an element that follows anywhere after the prior element.  
 Both elements share the same parent.
 
-```css linenums="1"
+```css
 h2 ~ p { property: value; }
 ```
 
-```html linenums="1"
+```html
 <section>
     <!-- Will NOT match -->
     <p>Lorem ipsum dolor sit amet</p>
@@ -172,16 +147,16 @@ h2 ~ p { property: value; }
 <p>Lorem ipsum dolor sit amet</p>
 ```
 
-### Adjacent sibling selector (+)
+### Adjacent sibling selector (`+`)
 
 Selects an element that follows directly after the prior element.  
 Both elements share the same parent.
 
-```css linenums="1"
+```css
 h2 + p { property: value; }
 ```
 
-```html linenums="1"
+```html
 <section>
     <!-- Will NOT match -->
     <p>Lorem ipsum dolor sit amet</p>
@@ -199,60 +174,109 @@ h2 + p { property: value; }
 <p>Lorem ipsum dolor sit amet</p>
 ```
 
-## Attribute Selector
+### Namespace Separator (`|`)
 
-Select elements based on whether an attribute is present and what it's value may contain.
+The **namespace** separator separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector.
 
-`selector[attribute] { property: value; }`
+```css
+@namespace <namespace> url("<XML-namespace-URL>");
 
-### Attribute Present Selector
+/* specific namespace */
+namespace|selector { property: value; }
+
+/* any namespace */
+*|selector { property: value; }
+
+/* no namespace */
+|selector { property: value; }
+```
+
+```css
+@namespace svg url('http://www.w3.org/2000/svg');
+
+a {
+  color: orangered;
+  text-decoration: underline dashed;
+  font-weight: bold;
+}
+
+svg|a {
+  fill: blueviolet;
+  text-decoration: underline solid;
+  text-transform: uppercase;
+}
+```
+
+```html
+<p>This paragraph 
+    <!-- will be colored orangered -->
+    <a href="#">has a link</a>.
+</p>
+
+<svg width="400" viewBox="0 0 400 20">
+  <!-- will be colored blueviolet -->
+  <a href="#">
+    <text x="0" y="15">Link created in SVG</text>
+  </a>
+</svg>
+```
+
+### Column Selector (`||`)
+
+The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.
+
+```css
+column-selector || cell-selector { property: value; }
+```
+
+### Attribute Present Selector (`tag[attr]`)
 
 `a[target]{ property: value; }` will match
 
-```html linenums="1"
+```html
 <a href="#" target="_blank">click here</a>
 ```
 
-### Attribute Equals Selector (=)
+### Attribute Equals Selector (`=`)
 
 `a[href="https://google.com"] { property: value; }` will match
 
-```html linenums="1"
+```html
 <a href="http://google.com/">search on google</a>
 ```
 
-### Attribute Contains Selector (*=)
+### Attribute Contains Selector (`*=`)
 
 `a[href*="login"] { property: value; }` will match
 
-```html linenums="1"
+```html
 <a href="/login.php">login page</a>
 ```
 
-### Attribute Begins With Selector (^=)
+### Attribute Begins With Selector (`^=`)
 
 `a[href^="Https://"] { property: value; }` will match
 
-```html linenums="1"
+```html
 <a href="https://www.bbc.com/">The BBC</a>
 ```
 
-### Attribute Ends With Selector ($=)
+### Attribute Ends With Selector (`$=`)
 
 `a[href$=".pdf"] { property: value; }`
 
-```html linenums="1"
+```html
 <!-- WILL match -->
 <a href="/docs/menu.pdf">download menu</a>
 <!-- Will NOT match -->
 <a href="/audio/song.mp3">download song</a>
 ```
 
-### Attribute Spaced Selector (~=)
+### Attribute Spaced Selector (`~=`)
 
 `img[alt~="child"] { property: value; }`
 
-```html linenums="1"
+```html
 <!-- WILL match -->
 <img src="child.jpg" alt='a small child'>
 <!-- Will NOT match -->
@@ -261,11 +285,11 @@ Select elements based on whether an attribute is present and what it's value may
 <img src="child.jpg" alt='asmallchild'>
 ```
 
-### Attribute Hyphenated Selector (|=)
+### Attribute Hyphenated Selector (`|=`)
 
 `p[lang|="en"] { property: value; }`
 
-```html linenums="1"
+```html
 <!-- WILL match -->
 <p lang="en">English</p>
 <!-- WILL match -->
@@ -274,11 +298,11 @@ Select elements based on whether an attribute is present and what it's value may
 <p lang="fr">Français</p>
 ```
 
-## [CSS Pseudo-Classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
+## [Pseudo-Classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
 
 Pseudo-classes can style elements based on their current state. They must be specified after the base case.
 
-```css linenums="1"
+```css
 selector:pseudo-class { property: value; }
 ```
 
@@ -321,14 +345,14 @@ Can select even/odd elements, "every third", "the first five", etc.
 `selector:empty {...}` selects elements with no content (empty tags).  
 `selector:not() {...}` selects elements that do not have a certain tag, attribute, class, ID, etc.
 
-## Pseudo-Elements
+## [Pseudo-Elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
 
 Dynamic elements that don't exist in the document tree.
 When used within selectors allow unique parts of the page to be stylized. Only one pseudo-element may be used within a selector at a given time.
 
 ### Textual Pseudo-Elements
 
-`selector::first-letter {...}` select the first letter of the text within an element.  
+`selector::first-letter {...}` selects the first letter of the text within an element.  
 `selector::first-line {...}` selects the first line of text within an element.
 
 ### Content Pseudo-Elements
@@ -337,8 +361,8 @@ When used within selectors allow unique parts of the page to be stylized. Only o
 `selector::after {...}` creates a pseudo-element after, or behind, the selected element.  
 **These pseudo-elements appear nested within the selected element, not outside of it.**
 
-```css linenums="1"
-a::after/before {
+```css
+selector::<after|before> {
     property: value;
     content: " (" attr(attribute_name) ")";
     property: value;
@@ -348,9 +372,47 @@ a::after/before {
 ### Fragment Pseudo-Elements
 
 `selector::selection {...}` identifies part of the document that has been selected, or highlighted, by a user's actions.  
-`selector::-moz-selection {...}` Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browser.
 
-## Units
+## CSS Cascading
+
+The browser assigns different priorities to CSS depending on the type of selector.
+
+1. Inline CSS (Most Important)
+2. ID selector
+3. Class selector
+4. Element selector (Least Important)
+
+The browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.  
+Rules lower in the file overwrite higher rules in the file.
+
+### Cascading Override With `!important`
+
+The `!important` declaration overrides any other declaration.  
+Using it is very bad practice because it makes debugging more difficult by breaking the natural cascading in stylesheets.
+
+Only use `!important` when:
+
+- overriding foreign CSS (e.g. from a library)
+- overriding inline CSS
+
+```css
+selector[style*="property:value"] {
+    property: value !important;
+}
+```
+
+### Specificity
+
+A weight is applied to a CSS declaration, determined by the number of each selector type:
+
+- `1-0-0`: ID selector  
+- `0-1-0`: Class selector, Attribute selector, Pseudo-class  
+- `0-0-1`: Element Selector, Pseudo-element  
+- `0-0-0`: Universal selector (`*`), combinators (`+`, `>`, `~`, `||`) and negation pseudo-class `:not()`  
+
+> **Note**: The selectors declared inside `:not()` contribute to the weight.
+
+## [Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
 
 ### Absolute Length units
 
@@ -379,13 +441,11 @@ a::after/before {
 | `vmax` | 1% of the viewport's larger dimension.                              |
 | `%`    | Relative to the parent element                                      |
 
-## Element Properties
+## Common Element Properties
 
 ### Color
 
-The color property changes the color of the text,
-
-```css linenums="1"
+```css
 selector {
     color: color-name;
     color: #<hex-digits>;
@@ -396,24 +456,30 @@ selector {
 
 ### Background
 
-- Allows to control the background of any element
-- A shorthand property: allows to write multiple CSS properties in one
-- All background definitions are optional, but at least one must be stated
-- Default values are given to background if some are not defined
-
-```css linenums="1"
+```css
 selector {
-    background:
-         url('texture.jpg') /* image */
-         top center / 200px 200px /* position / size */
-         no-repeat /* repeat */
-         fixed /* attachment */
-         padding-box /* origin */
-         content-box /* clip */
-         red; /* color */
-}
+    background: <image> <position> / <size> <repeat> <attachment> <origin> <clip> <color>;
 
-selector {
+    background-image: <image-path>;
+
+    background-position: <top|bottom|left|right|center>;
+    background-position: <inherit|initial|revert|revert-layer|unset>;
+    background-position: <x> <y>
+
+    background-size: <size>;
+    background-size: <width> <height>;
+    background-size: <size>, <size>;  /* multiple background */
+
+
+    background-repeat: <horizontal> <vertical>;
+    background-repeat: <repeat|no-repeat|repeat-x|repeat-y|space|round>;
+
+    background-attachment: <scroll|fixed|local>;
+
+    background-origin: <border-box|padding-box|content-box>;
+    background-clip: <border-box|padding-box|content-box|text>
+
+    background-color: <color>;
     background-color: color-name;
     background-color: #<hex-digits>;
     background-color: rgb();
@@ -421,41 +487,16 @@ selector {
 }
 ```
 
-It's possible to use any combination of properties in any order however the above order is recommended to avoid confusion.  
-Anything not specified is automatically set to its default.
+### Font
 
-`background` is made up of eight properties:
-
-- `background-image`
-- `background-position`
-- `background-size`
-- `background-repeat`
-- `background-attachment`
-- `background-origin`
-- `background-clip`
-- `background-color`
-
-**Background-image**  
-The path to the image. Example: `url('../css/image.png')`
-
-**Background-repeat**  
-Whether the background repeats if the width exceeds the background size  
-Possible values: `no-repeat`, `repeat`, `repeat-x` and `repeat-y`
-
-**Background-position**  
-Position of the background relative to the HTML element
-Can accept two unit values: X (left offset) and Y (top offset)
-Can also accept Keywords: `left`, `center`, `right` and `top`, `center`, `bottom`.
-
-**Background-attachment**  
-Specifies whether the background image should scroll with the page or be fixed
-
-### Font Family
-
-The font family defines which font is used. When listing multiple fonts, always  list a generic name last.
-
-```css linenums="1"
+```css
 selector {
+    font: <style> <weight> <size> <family>;
+    font-style: <style>;
+    font-weight: <weight>;
+    font-size: <size>;
+    font-family: <family>;
+
     /* specific font name */
     font-family: "Font Name";
 
@@ -467,56 +508,11 @@ selector {
 }
 ```
 
-### Google Fonts
+### Text Decoration & Aliment
 
-[Documentation](https://developers.google.com/fonts/docs/getting_started)
-
-In `page.html`:
-
-```html linenums="1"
-<!-- Google Font -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontFamily&display=swap">
-```
-
-In `style.css`:
-
-```css linenums="1"
+```css
 selector {
-    font-family: 'Font Name';
-}
-```
-
-### Font Size
-
-```css linenums="1"
-selector {
-    font-size: 11px;  /* pixels */
-    font-size: 1.5em;
-    font-size: 100%;  /* percentage */
-}
-```
-
-### Fonts (shorthand)
-
-```css linenums="1"
-selector {
-    font-style: italic;
-    font-weight: bold;
-    font-size: 11px;
-    font-family: sans-serif;
-}
-
-
-selector {
-    font: italic bold 11px sans-serif;
-}
-```
-
-### Text Decoration & Text Align
-
-```css linenums="1"
-selector {
-    text-decoration: line color style thickness;
+    text-decoration: <line> <color> <style> <thickness>;
     text-align: alignment;
 }
 ```
@@ -539,110 +535,39 @@ selector {
 - `justify-all`: Same as justify, but also forces the last line to be justified.
 - `match-parent`: Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.
 
-### Width
+### Size
 
-Sets the width of a block-level element or img; does not work for inline elements (unless their display property is changed).  
-Accepts a variety of length units.
-
-```css linenums="1"
+```css
 selector {
-    width: 200px;
-    width: 20em ;   /* relative to font size */
-    width: 20%;    /* relative to containing element width */
-    width: 20vw;    /*relative to window width: 1vw = 1% window width */
-}
-```
+    width: <size>;
+    max-width: <size>;
+    min-width: <size>;
 
-### Height
+    height: <size>;
+    max-height: <size>;
+    min-height: <size>;
 
-Sets the height of a block-level element or img; does not work for inline elements (unless their display property is changed).  
-Accepts a variety of length units.
-
-```css linenums="1"
-selector {
-    height: 200px;
-    height: 20em ;    /* relative to font size */
-    height: 20%;    /* relative to containing element height */
-    height: 20vw;    /*relative to window height: 1vw = 1% window height */
-}
-```
-
-### Aspect Ratio
-
-The aspect-ratio  CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
-
-```css linenums="1"
-selector {
     aspect-ratio: <width> / <height>;
 }
 ```
 
-### Min-Max Width/Height
+> **Note**: `width` and `height` properties do not have effect on inline elements.
 
-Set upper or lower limits to the size of elements.  
-An element cannot be smaller than its `min-width` or `min-height`.  
-An element cannot be larger than its `max-width` or `max-height`.
+### Hiding Elements
 
-```css linenums="1"
-selector {
-    max-width: 100%;    /* may be no wider than the containing element */
-    width: 30%;    /* will be 30% of the width of the containing element */
-    min-width: 200px;    /* but will stop shrinking with its parent at 200px */
-}
-```
+There are several methods to 'hide' elements:
 
-## CSS Cascading
+- `display: none` removes the element from the document flow
+- `visibility: hidden` hides the element, but it still takes up space in the layout
+- `opacity: 0` hides the element, still takes up space in the layout, events work
 
-The browser assigns different priorities to CSS depending on the type of selector.
+| Rule                 | Collapse | Events | Tab Order |
+| -------------------- | -------- | ------ | --------- |
+| `display: none`      | Yes      | No     | No        |
+| `visibility: hidden` | No       | No     | No        |
+| `opacity: 0`         | No       | Yes    | Yes       |
 
-1. Inline CSS (Most Important)
-2. ID selector
-3. Class selector
-4. Element selector (Least Important)
-
-The browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.  
-Rules lower in the file overwrite higher rules in the file.
-
-### Cascading Override With `!important`
-
-The `!important` declaration overrides any other declaration.  
-Using it is very bad practice because it makes debugging more difficult by breaking the natural cascading in stylesheets.
-
-Only use `!important` when:
-
-- overriding foreign CSS (e.g. from a library)
-- overriding inline CSS
-
-```css linenums="1"
-selector[style*="property:value"] {
-    property: value !important;
-}
-```
-
-### CSS Reset & Normalize
-
-Each browser varies in how it displays web pages.
-
-CSS reset sheets are used to normalize the default CSS across browsers.  
-CSS Reset removes every default style and all built-in browser styling.  
-The developer is supposed to add any styling from scratch.
-
-The CSS Normalize aims to make built-in browser styling consistent across browsers.  
-The developer is supposed to add additional styling where required.
-
-## Specificity
-
-A weight is applied to a CSS declaration, determined by the number of each selector type:
-
-- `1-0-0`: ID selector  
-- `0-1-0`: Class selector, Attribute selector, Pseudo-class  
-- `0-0-1`: Element Selector, Pseudo-element  
-- `0-0-0`: Universal selector (`*`), combinators (`+`, `>`, `~`, `||`) and negation pseudo-class `:not()`  
-
-**Note**: The selectors declared inside `:not()` contribute to the weight.  
-Specificity is usually the reason why CSS-rules don't apply to some elements when think you they should
-
-## Box Model
+## [Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
 
 ![Box Model](../../img/css_box-model.png)
 
@@ -652,223 +577,101 @@ Space between the border and the content.
 
 It's possible to specify the padding for each side of the element:
 
-```css linenums="1"
+```css
 selector {
-    padding-top: 15px;
-    padding-right: 10%;
-    padding-bottom: 10em;
-    padding-left: 50vw;
+    padding-top: <size>;
+    padding-right: <size>;
+    padding-bottom: <size>;
+    padding-left: <size>;
+
+    padding: <top> <right> <bottom> <left>;  /* Four values (TRBL) */
+    padding: <top> <right/left> <bottom>;  /* Three values (T/TL/B) */
+    padding: <top/bottom> <right/left>;    /* Two values (TB/RL) */
+    padding: <all>;    /* One value */
 }
 ```
 
-#### Padding shortcuts
-
-```css linenums="1"
-selector {
-    padding: top right bottom left;  /* Four values (TRBL) */
-    padding: top right/left bottom;  /* Three values (T/TL/B) */
-    padding: top/bottom right/left;    /* Two values (TB/RL) */
-    padding: all;    /* One value */
-}
-```  
-
-**Note**: Padding adds to the total size of the box, unless `box-sizing: border-box;` is used.
+> **Note**: Padding adds to the total size of the box, unless `box-sizing: border-box;` is used.
 
 ### Border
 
-Borders are specified as "thickness, style, color".
+Borders are specified as "size, style, color".
 
-```css linenums="1"
+```css
 selector {
-    border-width: 10px;
-    border-style: dashed;
-    border-color: #666666;
+    border: <size> <style> <color>;
+    border-width: <size>;
+    border-style: <style>;
+    border-color: <color>;
 
-    border-radius: 5px;    /* Rounded borders */
+    border-top: <size> <style> <color>;
+    border-right: <size> <style> <color>;
+    border-bottom: <size> <style> <color>;
+    border-left: <size> <style> <color>;
+
+    border-top-width: <size>;
+    border-right-width: <size>;
+    border-bottom-width: <size>;
+    border-left-width: <size>;
+
+    border-top-style: <size>;
+    border-right-style: <size>;
+    border-bottom-style: <size>;
+    border-left-style: <size>;
+
+    border-top-color: <size>;
+    border-right-color: <size>;
+    border-bottom-color: <size>;
+    border-left-color: <size>;
+
+    border-radius: <top-left> <top-right> <bottom-tight> <bottom-left>;
+    border-radius: <top-left> <top-right/bottom-left> <bottom-right>;
+    border-radius: <top-left/bottom-right> <top-right/bottom-left>;
+    border-radius: <all>;
+
+    border-top-left-radius: <size>;
+    border-top-right-radius: <size>;
+    border-bottom-right-radius: <size>;
+    border-bottom-left-radius: <size>;
 }
 ```
 
-#### Border shortcuts
-
-```css linenums="1"
-selector {
-    border: thickness style color;
-}
-```
-
-**Note**: Border adds to the total size of the box, `unless box-sizing: border-box;` is used
+> **Note**: Border adds to the total size of the box, `unless box-sizing: border-box;` is used
 
 ### Box Sizing
 
 Defines whether the width and height (and min/max) of an element should include padding and borders or not.
 
-```css linenums="1"
+```css
 selector {
     box-sizing: content-box;    /* Border and padding are not included */
     box-sizing: border-box;    /* Include the content, padding and border */
 }
 ```
 
-#### Box Sizing Reset
-
-Universal Box Sizing with Inheritance
-
-```css linenums="1"
-html {
-    box-sizing: border-box;
-}
-
-*, *:before, *:after {
-    box-sizing: inherit;
-}
-
-```
-
 ### Margin
 
 Transparent area around the box that separates it from other elements.
 
-It's possible to specify the margin for each side of the element:
+It's possible to specify the margin for each side of the element.
 
-```css linenums="1"
+```css
 selector {
-    padding-top: 15px;
-    padding-right: 10%;
-    padding-bottom: 10em;
-    padding-left: 50vw;
+    margin-top: <size>;
+    margin-right: <size>;
+    margin-bottom: <size>;
+    margin-left: <size>;
+
+    margin: <top> <right> <bottom> <left>;  /* Four values (TRBL) */
+    margin: <top> <right/left> <bottom>;  /* Three values (T/TL/B) */
+    margin: <top/bottom> <right/left>;    /* Two values (TB/RL) */
+    margin: <all>;    /* One value */
 }
 ```
 
-#### Margin shortcuts
+> **Note**: Top and bottom margins of near elements are collapsed into a single margin that is equal to the largest of the two margins.
 
-```css linenums="1"
-selector {
-    margin: top right bottom left;  /* Four values (TRBL) */
-    margin: top right/left bottom;  /* Three values (T/TL/B) */
-    margin: top/bottom right/left;    /* Two values (TB/RL) */
-    margin: all;    /* One value */
-}
-```
-
-**Note**: Margins use the same syntax as padding.
-
-#### Auto Margin
-
-If a margin is set to auto on a box that has width it will take up as much space as possible.
-
-```css linenums="1"
-selector {
-    /* Centered */
-    margin: 0 auto;
-    width: 300px;
-}
-
-selector {
-    /* Align box to the right */
-    margin-left: auto;
-    margin-right: 5px;
-    width: 300px;
-}
-```
-
-### Collapsing Margins
-
-Top and bottom margins of near elements are collapsed into a single margin that is equal to the largest of the two margins.
-
-## Layout
-
-### Display Property
-
-```css linenums="1"
-div {
-    display: inline; /* Default of all elements, unless UA (user agent) stylesheet overrides */
-    display: block; /* block is default for elements like <div> and <section>*/
-    display: inline-block; /* Characteristics of block, but sits on a line */
-    display: grid; /* divide page into major regions or define the relationship in terms of size */
-    display: none; /* Hide */
-}
-```
-
-Inline:
-
-- The default value for elements (e.g. `<span>`, `<em>`, `<b>`, etc.)
-- Doesn't break the flow of the text
-- The element will accept margin and padding, but the element still sits inline
-- Margin and padding will only push other elements horizontally, not vertically
-- An inline element will not accept height and width.
-
-Block
-
-- Some elements are set to block by the browser UA (user agent) stylesheet
-- Container elements, like `<div>`, `<section>`, `<ul>`, etc.
-- Text block elements like `<p>`, `<h1>`, `<h2>`, etc.
-- Do not sit inline
-- By default take up as much horizontal space as they can
-
-Inline Block
-
-- Combines aspects of inline and block
-- Very similar to inline in that it will sit inline with the natural flow of text
-- Able to set a width and height
-
-None
-
-- `display: none` removes the element from the document flow
-- The element does not take up any space
-
-### Hiding elements
-
-There are several methods to 'hide' elements:
-
-`display: none` removes the element from the document flow
-`visibility: hidden` hides the element, but it still takes up space in the layout
-`opacity: 0` hides the element, still takes up space in the layout, events work
-
-| Rule                 | Collapse | Events | Tab Order |
-| -------------------- | -------- | ------ | --------- |
-| `display: none`      | Yes      | No     | No        |
-| `visibility: hidden` | No       | No     | No        |
-| `opacity: 0`         | No       | Yes    | Yes       |
-
-### Float
-
-Floating an element moves it as far to the left or right of its containing element as possible.  
-Other elements, e.g. paragraphs or lists, will wrap around the floated element.  
-Floated elements without a width will take up the whole width of the container and not appear floated.  
-It's possible to specify whether an element is floated or not and which side it floats on.
-
-**Note**: floated elements will fill the space from left to right and go to a new line based on remaining space.
-
-To place two block level elements to be side by side float both elements, one left and one right.
-
-```css linenums="1"
-.float-child-left {
-    float: left;
-    width: 200px;
-    background: #4fc3f7;
-}
-
-.float-child-right {
-    float: right;
-    width: 150px;
-    background: #ffa726;
-}
-```
-
-### Clear
-
-Clearing tells the element on which side (right, left, both) other elements cannot
-appear.  
-
-Clearing both ensures the element doesn't wrap next to floats on either side.
-
-```css linenums="1"
-selector {
-    clear: right;
-    clear: left;
-    clear: both;
-}
-```
+## [Element Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
 
 ### Static Positioning
 
@@ -879,7 +682,7 @@ Static elements ignore top, bottom, right, or left property specifications.
 In normal flow block elements flow from top to bottom making a new line after every element.
 In normal flow inline elements flow from left to right wrapping to next line when needed.
 
-```css linenums="1"
+```css
 selector {
     position: static;
 }
@@ -891,7 +694,7 @@ Takes the element out of the normal flow, allowing it to be moved in relation to
 Makes an element a "positioning context" in which to position other elements relative to it.  
 The relative value will still put the element in the normal flow, but then offset it according to top, bottom, right and left properties.
 
-```css linenums="1"
+```css
 selector {
     position: relative;
 }
@@ -904,7 +707,7 @@ An absolutely positioned element is offset from its container block, set with th
 Its container block is the first surrounding element that has any position other than static.  
 If no such element is found, the container block is `<html>`.
 
-```css linenums="1"
+```css
 selector {
     position: absolute;
 }
@@ -915,7 +718,7 @@ selector {
 The fixed value takes an element out of the normal flow, it positions it relative to the viewport.  
 Parent positioning will no longer affect fixed elements.
 
-```css linenums="1"
+```css
 selector {
     position: fixed;
 }
@@ -926,10 +729,9 @@ selector {
 Sticky positioning is a hybrid of relative and fixed positioning.  
 The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
 
-```css linenums="1"
+```css
 selector {
     position: sticky;
-    position: -webkit-sticky;
 }
 ```
 
@@ -945,15 +747,64 @@ When elements overlap, the order of overlapping can be changed with z-index:
 
 **Nesting is important**: if element *B* is on top of element *A*, a child of element *A* can never be higher than element *B*.
 
-```css linenums="1"
+```css
 selector {
     z-index: <int>;
 }
 ```
 
+## [Layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+
+```css
+div {
+    display: inline; /* Default of all elements, unless UA (user agent) stylesheet overrides */
+    display: block; /* block is default for elements like <div> and <section>*/
+    display: inline-block; /* Characteristics of block, but sits on a line */
+    display: flex;
+    display: grid; /* divide page into major regions or define the relationship in terms of size */
+    display: none; /* Hide */
+}
+```
+
+### Inline
+
+- The default value for elements (e.g. `<span>`, `<em>`, `<b>`, etc.)
+- Doesn't break the flow of the text
+- The element will accept margin and padding, but the element still sits inline
+- Margin and padding will only push other elements horizontally, not vertically
+- An inline element will not accept height and width.
+
+### Block
+
+- Some elements are set to block by the browser UA (user agent) stylesheet
+- Container elements, like `<div>`, `<section>`, `<ul>`, etc.
+- Text block elements like `<p>`, `<h1>`, `<h2>`, etc.
+- Do not sit inline
+- By default take up as much horizontal space as they can
+
+### Inline Block
+
+- Combines aspects of inline and block
+- Very similar to inline in that it will sit inline with the natural flow of text
+- Able to set a width and height
+
+### None
+
+- `display: none` removes the element from the document flow
+- The element does not take up any space
+
+### [Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout)
+
+```css
+selector {
+    display: "flex";
+    flex-direction: <row|column>;
+}
+```
+
 ### [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
-```css linenums="1"
+```css
 selector {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
@@ -961,24 +812,9 @@ selector {
 }
 ```
 
-## Functions
+## Variables
 
-### Clamp
-
-The `clamp()` CSS function clamps a value between an upper and lower bound. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.  
-The `clamp()` function can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed.
-
-clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX))
-
-```css linenums="1"
-selector {
-    length: clamp(MIN, VAL, MAX)  /* is resolved as max(MIN, min(VAL, MAX)) */
-}
-```
-
-### Var & Variables
-
-```css linenums="1"
+```css
 :root {
     /* define variables on :root element */
     --variable: value;
@@ -990,192 +826,73 @@ selector {
 }
 ```
 
----
-
-## Content First
-
-Content is the reason users visit websites, download apps, provides email addresses.
-Content encompasses a variety of media:
-
-- Graphics, video, audio,
-- Social media communication
-- Anything used to tell a story or communicate an idea
-
-A user-friendly digital framework enables users to make a series of choices that helps them tell their story.
-
-A non content design approach risks creating useless templates. It requires more reworks and increases project costs.
-Risks miscommunications with clients and impacts the User Experience (UX).
-
-### How To Work Content First
-
-1. **Prefect the user experience**:
-    Think about the whole user experience rather than content in terms of individual pages.
-    Considering the content early the process can yield a better experience.
-
-2. **Consider all channels upfront**:
-    Aim to have unified and consistent content across all channels devices
-    Helps to spot opportunities and problems early on
-
-3. **Use content to define the layout and design**:
-    Understand how content can inform design
-    Don't spend time creating templates you won't use
-    Focus on problem-solving for your users
-
-4. **Use proto-content**:
-    Focus on getting the writing done
-    Work with a prototype
-    Use proto-content instead of non-contextual placeholders such as Lorem Ipsum
-    Use existing content, draft content, or sample content
-
-5. **Understand content and technological requirements early**:
-    Start discussions early across different disciplines: content, UX, design and development
-    Have discussions around the required technology to deliver content
-    Modify the development platform to accommodate the content rr design the content with the limitations of the development platform in mind
-
-## Mobile First
-
-Mobile phones are an integral part of our lives. More than 50% of all global web traffic comes from mobile phones.  
-Google looks at the mobile version before the desktop when ranking a site. Users have a higher trust in websites that are have an excellent mobile UX. Easier to progress from more straightforward outline and functionality to complex solutions.
-
-### How To Work Mobile First
-
-- Mobile-first coding:
-  - If you use a framework, make sure it's mobile-first
-  - If you write custom code, always prioritize mobile
-  - Code elements as mobile-first
-- Intuitive and user-friendly interactions
-  - Clear CTAs (Call to Action)
-  - Super quick loading
-- Optimise your content (mobile first usually implies content-first)
-  - Relevant, easy to read quickly content (divide long text)
-  - Scroll rather than click
-  - Help users find what they are looking for quickly
-  - Use fonts that display well on mobile
-
-## Responsive Design And Development
+## Responsive Design
 
 A **responsive** website or application automatically adjusts to the screen and adapts to any device.
 
-Responsiveness is a feature of a web page: Is an outcome of specific web development techniques and usually implies mobile-first but does not require it.
-Is achieved by deploying media queries that change the default CSS styles and/or modify the layout
-
-*Designers*:
-
-- Used to start from the desktop version
-- The mobile version was an afterthought
-- Today it's common to design for mobile-first
-- Design the desktop version by scaling up and adding features
-
-*Developers*:
-
-- Used to develop for the desktop first
-- Mobile development is more painful and requires more knowledge, more testing and more creativity in problem solving
-
-*Teams*:
-
-- More collaboration between multiple disciplines: Copy, UI, UX, developers
-- More coordination, adaptation and iteration
-
-### Breakpoints
-
-Breakpoints are often defined in collaboration with UI/UX designers.
-There are no defined standard for widths to target in media queries so any reasonable set of increments is enough to target most devices.
-The aim is to have sufficient breakpoints to target smartphones, tablets, laptops, and desktops.
-
-Some of the most common widths used:
-
-- `320px`
-- `480px`
-- `576px`
-- `768px`
-- `992px`
-- `1024px`
-- `1200px`
-
-Example of *Bootstrap* (front-end framework) breakpoints:
-
-```css linenums="1"
-/* Extra small devices (portrait phones, less than 576px) */
-/* No media query for `xs` since this is the default in Bootstrap */
-/* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) {}
-
-/* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) {}
-
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {}
-
-/* Extra large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {}
-```
-
-### Viewport Metatag
+### Viewport Meta-Tag
 
 Is located in the `<head>` of the HTML document. It defines how a site should render in a web browser for mobile devices and makes media queries will work as intended.
 
-`<meta name="viewport" content="width=device-width, initial-scale=1">`
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
 
-`device-width`: indicates the width should match with the viewport of the device
-`initial-scale`: ensure the zoom will not be applied and the layout will always show on a *1:1* scale
-Other settings can be used in the viewport tag but it is not recommended to change them.
+- `device-width`: indicates the width should match with the viewport of the device
+- `initial-scale`: ensure the zoom will not be applied and the layout will always show on a `1:1` scale
 
 ### Media Queries
 
-**Media queries** allow the customization of web pages for specific devices (mobile phones, tablets, desktops, etc).
-The HTML code is not changed, only the CSS style.
+**Media queries** allow the customization of web pages for specific devices screen sizes.
 A media query is a logical expression: true or false; if a media query is true, the related rules are applied to the target device.
 
-| Type     | Used For                                     |
-| -------- | -------------------------------------------- |
-| `all`    | all media type devices                       |
-| `print`  | printers                                     |
-| `screen` | computer screens, tablets, smart-phones, etc |
-| `speech` | screen readers that "reads" the page out loud |
-
-```css linenums="1"
+```css
 @media type operator (feature) {
-    selector {
-        /* css rule */
-    }
+    selector { property: value; }
 }
 
 /* AND logic: Both conditions must be true */
 @media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: #31c78d;
-    }
+    selector { property: value; }
 }
 /* OR logic: At least one conditions should be true */
 @media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: #00c3ff;
-    }
+    selector { property: value; }
 }
 
 /* NOT logic: Negates the entire condition */
 @media not all and (orientation: landscape) {
-    body {
-        color: #dab928;
-    }
+    selector { property: value; }
 }
-
 ```
 
-**Media type**: all, screen, print, speech
-**Media features**: width, min-width, max-width, orientation, height, min-height, max-height, etc
-**Logical operators**: Logically represent `and`, `or`, `not`. The `or` logic is represented by a comma (just like in CSS selectors)
+Types:
 
-It's possible to specify a media attribute in the link element. This applies a whole stylesheet when the condition is true. Possible to do but preferable to specify a single stylesheet with individual media queries.
+- `all`: all media type devices.
+- `print`: printers.
+- `screen`: computer screens, tablets, smart-phones, etc.
+- `speech`: screen readers that "reads" the page out loud.
 
-```html linenums="1"
+Features:
+
+- `width`
+- `min-width`
+- `max-width`
+- `height`
+- `min-height`
+- `max-height`
+- `orientation`
+
+It's possible to specify a media attribute in the link element. This applies a whole stylesheet when the condition is true:
+
+```html
 <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
 <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
 ```
 
-It's also possible to have different stylesheets based on media type. This might make sense for some use cases.
+It's also possible to have different stylesheets based on media type:
 
-```html linenums="1"
+```html
 <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
 <link rel="stylesheet" type="text/css" href="print.css" media="print">
 ```
