What is Specificity?

Specificity Hierarchy:

Every CSS selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:

• on top of all is !important
• Inline styles - Example: h1 style="color: pink;"/h1
• IDs - Example: #navbar
• Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
• Elements and pseudo-elements - Example: h1, :before

• Block level
  • new line, full width of PARENT, from left to right,
  • ex. div h1 p, we can set width height of the element
  • to check if an element is block or not just add a css style background color red, and see if this makes the entire length red, its block else not.

• Inline level
  • NOT new line, NOT TAKE FULL width of PARENT, TAKES space as necessary
  • cant set width height of teh element
  • ex. span a img
  • to check if an element is inline or not just add a css style background color red, and see if this doesnt makes the entire length red, its inline, also oyu cant adjust height width.

• Block - Inline level
  • we can override display property from inline to block and vice erse
  • element sit next to other element
  • it doesnt add a line break after the element
  • use display:inline-block
  • use display: none to hide

• Static - default, cant add top/bottom/left/right
• Relative - posn related to normal posn, can add t/b/l/r, other elmts behave there is no element
• Fixed - posn related to viewport, affected by tblr, doesnt leave gaps
• Absolute - posn related to nearest parent, aff by tblr, ti move from normal flow it will look up if the parent has a position relative otherwise it document body
• Sticky - you can have tblr

• Name
• Duration
• Timing-function
  1. Linear
  2. Ease
  3. Easein
  4. Ease-out
• Delay
• Iteration-count
• Keyframes

1. Create using keyframes
2. A dd animation to eleemnt

• name = "viewport"/content = "width = device-width
  checkout  Mydevice.io  for viewport (the visible part of your applncn)
• Media Query - using @media screen and (min-width:600px){ css }

1. /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...}
2. /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...}
3. /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...}
4. /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...}
5. /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}

It has a parent(container) and a child(elements wrapped - flex items)

1. flex direction
2. justify content
3. align items
4. align content
5. flex wrap
6. flex flow

1. order number
2. flex: number | auto| none
3. align-self: flex-start end center baseline stretch