DAY2: Inherit,initial,unset and revert keyword & Relative units.

1.Adding em unit to padding

Small 12px Large 16px

Both span have same padding and padding radius of 1em but due to difference in font size it automatically adjust padding to 12 px and 16 px respectively.

Let see what happen when we use 1.5em instead of 1 em

Small 12px Large 16px

This time, you will notice pading has been incresed, 12*1.5 = 16px and 16*1.5= 24px respectively.

2. Adding relative unit to font size EM

fontsize: 1em fontsize: 1.2em

3. what is rem

basically root_em. we know about pseudo class :root which is sort of type selector for whole HTML

4. @media queries

in this page we have kept
:root{font-size: 0.8}
-----------------------
@media (min-width:800) {
:root{ font-size: 1em}
}
what it will do that, when screen size drop below 800px it will lower the FontSize to 0.8em

Learning 1: Inherit = This keyword inherit the values from parent.
Learning 2: Initial = Every CSS property has an initial or default value. If you assign the value initial to that property then it effectivelyresets to its default value.
Learning 3: unset = Combination of Inherit and initial. when applied to an iherited property it set the value to iherit,to non inherited propety to initial.
Learning 4: revert = helps when working with new css features and you not know oof the top of your head what the default values are.

JAVASCRIPT

Ques. what is exponential or pover Operator(**)?

Ans. using exponential Operator
--------------------------------------------------
const result1= 2**3;// raised to the power 3
console.log(result1);// 8
--------------------------------------------------
const result2 = 4**8.5 //sqaure root of 4
console.log(result2); //131072
--------------------------------------------------
const result3 = 10**-2 //10 raised to the power -2
console-log(result3); //0.01