style.css

/* The most common selectors are:

all elements with a specific HTML tag (e.g., p, h1)
class these are preceded by . in CSS, they cab target many elements 
id (these are preceded by # in CSS) 

element = HTML
selector = CSS

Specificity in this order:

1. element (1 point)
2. .class (10 points)
3. #id (100 points)

li            {...}  a=0 b=0 c=1 -> specificity =   1
ul li         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
/* ul ol li      {...}  a=0 b=0 c=3 -> specificity =   3 */
/* li.red        {...}  a=0 b=1 c=1 -> specificity =  11 */
/* ul ol li.red  {...}  a=0 b=1 c=3 -> specificity =  13 */
/* #list         {...}  a=1 b=0 c=0 -> specificity = 100 */

/*
be carefull with spaces 

p.special and p .special

The first one means a paragraph tag with the class "special". 
The second one means a tag with the class "special" where it's parent is the paragraph tag.

Width and Height- to make the content uniform on all devices use px, use % w resopon design

Padding vs margin - padding is spacing inside the border(inside the content around the content) 
and margin is spacing outside the border

inline vs block vs inline-block:
    vertical-align can be used to arrand contents with an inine-block

Flex - allows our content/structure flexable
flex components: container and item
flex axis: main axis and cros axis, by defult main is horizantal but can be changed

flex properties for containers
    Display
    Width & Height
    Flex Direction
    Flex Wrap
    Justify Content
    Align Content
    Align Items
flex properties for items
    Height & Width
    Order
    Flex Basis
    Flex Grow
    Flex Shrink
    Align Self
    Margin

Grid- just like flex bt two demention
    

*/