Understanding CSS Essentials:

CSS (Cascading Style Sheet) is a crucial tool for affecting the behaviour and appearance of the web pages front-end. For web design using html and JavaScript you must understand how to use CSS and how it affects elements (Microsoft 2013: 87).

CSS3 is the version of CSS that corresponds to HTML5, and most modern Web browsers support CSS3. Modern tools leverage the same standards to construct mobile applications: HTML, CSS, and JavaScript let you build apps, too. CSS can be written in any text editor as long as it's saved with the .css extension.

HTML link element:

To use an external CSS file in your html code it must be linked to it. This is done through the <link> tag with a few attributes.
The correct syntax for link of a CSS is as follows;
<link href = "filename.css" rel = "stylesheet" type = "text/css">
The CSS document contains a set of rules for the HTML file to follow.

Understanding Selectors and Declarations:

Each individual rule in CSS is made of 2 primary parts, the selector (name of the element or class) and the declaration consisting of the properties which are style attributes and the values that you want them to change to.

Fonts and Font Families :

The font family property is used to declare specific fonts or the family to use consisting of many fonts. It's best practice to include more than one font just in case the one you picked isn't supported by the browser. Also, if a font name has any spaces it must be written in quotes "font name".
p.sans-serif{ font-family: sans-serif, “Times new Roman”;}

Managing content flow:

"Flow" or display style is a fundamental HTML concept. It has to do with filling horizontal lines from left to right across the display, and separation of lines from top to bottom as one moves down the display.
• Inline flow: Fills only as much width as required
• Block flow: Fills as much width as is available
Inline flow "fits." It forces no new lines before or after the in-lined element, but simply places the element between the content before and after the in-lined element.
In block flow, in contrast to inline flow, an element is separated from other elements by new lines above and below and fills from left to right the horizontal extent where it appears. The CSS for this is;
Selector {display: inline;} or Selector {display: block;}

Float positioning:

Float is useful when you want your layout to be in columns moves the element as far as it can go either right or left and wraps around other elements.
Selector {float: left;} or selector {float: right;}.

Absolute positioning:

Positioning in relation the pixel coordinates specified.
selector {position: absolute;
bottom: 100px;
right: 100px;}

Overflow:

Overflow is a property that sets the behaviour of elements that have been reduced in size to not fit their bounding box.

Scroll overflow:

Displays a scrollbar on the end of the element to scroll through
Selector {overflow: scroll;}

Visible overflow:

The content leaks out of the container and probably onto other text that is underneath it
Selector {overflow: visible}

Hidden overflow:

Cuts of the content of the element short the cut of being where it escapes the bounding box.
Selector {overflow: hidden}