BACKGROUND
Background-image	background-image: url("imageofcat.jpg") Use this to set a background image with the url leading to the image.
Background-color	background-color: blue; This will set the colour in the background behind text or other elements.
Linear gradient	background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); This will set a gradient with the two colours specified.

BOX MODEL
Padding	padding: 10px; sets 10px padding all around content.
	padding: 10px 20px; sets 10px padding top and bottom and 20px left and right.
	padding: 10px 20px 30px; sets 10px top, 20px left and right, 30px bottom.
	padding: 10px 20px 30px 40px; sets 10px top, 20px right, 30px bottom, 40px left.

DISPLAY AND POSITIONING
vertical-align	vertical-align: top; lines up divs with different hights to the top of the container.
z-index	z-index: 1; z-index: -1; z-index determines what order elements are shown when they overlap eahother. The element with a lower z-index with be layered to the back whereas a higher z-index will be overlapping to the front.

COLOR
alpha	color: rgba(0, 255, 0, 0.5); 0r hsla(34, 100%, 50%, 0.1); Adding an alpha value to rgb or hsl determines the opacity or the color.
hsl(hue, saturation, lightness)	color: hsl(120, 30%, 40%) Hue is a number from 0-360 and determines the color Saturation is shown as a percentage(%), this is how intense the colour is. Lightness is also shown as a percentage(%).

LINKS AND BUTTONS
Pseudo-Class	link: hover: active: visited: Links have these four states 'not clicked', 'hovered over', 'clicked','visited'.
Showing links	a:hover { text-decoration: underline } This means when you hover over the link it becomes underlined.
Button styling, flat and skeuomorphic	.answer:hover { background-color: #C0D6DF; } .answer:active { color: #ffffff; } This is an example of a flat button styling where color changes happen when hovering over a button and pressing it. skeuomorphic styling gives a 3D appearance and changes to box-shadow and margin can give the appearance of the button moving down when being pressed.

FLEXBOX
Flex	div { display: flex; } Makes an element a flex container, that is full width of its parent. Items contained within this container are called flex items. The size and position of the flex items change in response to changing the size and position of the flex container.
	div { display: flex; justify-content: center; } This changes the distribution of space around the content. this is for when the content does not fill all the available space horizontally. center flex-start flex-end space-between space-around are all values of justify-content.