Manav Goyal

Theory - C S S

Basic
Layers

Basic

If you give space between tags then it will occupy some space in the browser (50 + 50 > 100)
Link CSS in HTML
- <tagName style="property: value;"> => Inline
- <style> tag {property: value;} </style> => External
- tagName {property: value;} => Internal
Variable
- Scope of the variable will be in all the children elements
- Generally written in
```
    :root {
        --variableName: val;
    }
```
- property: var(--variableName); => Applied like this
Specificity
- Calculator
- If same then priority given to last
- !important => Priority highest if used this keyword
Viewport
- px
  - Absolute, Size will not increase according to user preference in settings
- em
  - Relative to Parent
  - 1em = 16px => Size of <p> & <h4>
- rem
  - Relative to Body
- %
  - Relative to the parent
- vh
  - Percentage of height of screen
- vw
  - Percentage of width of screen
- vmax
  - Percentage of maximum of height & width of screen
- vmin
  - Percentage of minimum of height & width of screen
- vi
  - Inline represents width by default, Same as vw, CHanges with change in writing mode
- vb
  - Block represents height by default, Same as vh, CHanges with change in writing mode
- svh
- lvh
- dvh
  - Considers the dynamic changes that happens due to change in screen height

Debugging

    * {
      box-sizing: border-box;
      outline: 1px solid limegreen !important;
      <!-- OR -->
      background: rgb(0 100 0 / 0.05) !important;
    }

Layers

Cascading
- User agent (Browser defined)
- User defined
Priority
- Browser < User Defined Layer < No Layer
- Layer defined lower will have more specificity
@layer layerName {} => Define a layer
@layer layerName1, layerName2; => Define specificity of layers at the top of .css file
@import url("frameworkURL") layer(layerName); => Import a external stylesheet into a layer
!important defined in the first layer has the most specificity