Positions In CSS

different position values:
→ static -

default

- element will stick to the normal page flow,

so left/right/top/bottom/z-index - NA

Position Property in CSS

→ relative -

it really means “relative to itself”

- element will remain in normal page flow,

but now left/right/top/bottom/z-index will work,

relative to where it would have been if the positional property wouldn’t have been applied - z-index gets added

→ absolute -

the element is removed from the flow of the document and other elements will behave as if it’s not even there - left/right/top/bottom/z-index will work

→ fixed -

just like absolute

- only difference - fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling

relative, absolute and fixed.

→ sticky -

the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position

→ inherit -

inherit the positioning value from its parent

Position Property in CSS

positional properties:

top, bottom -
left, right -
auto -
inherit -
z-index -
any of the valid CSS unit (px, rem, vw, vh etc)
a percentage of the of the containing element’s height (for top and bottom) or width (for left and right)

Colors and Gradients In CSS

Selectors in CSS

Colors and Gradients

color can be added in 4 ways:

rgb,a (red, green, blue, alpha) -
contains values from 0 - 255, or 0 - 100%
rgb(183, 21, 64, 50%)
rgb(183 21 64 / 50%)
hex code - (any rgb,a color is converted to hex code)
hexa-decimal: base 16, [0-9 + A-F]
Eg: (b7 15 40)
b = 11*16+7 = 183
rgb(183, 21, 64)

Selectors in CSS

Colors and Gradients

hsl,a
(hue, saturation, lightness, alpha):-
saturation is how vibrant the selected hue is, 0% is grayscale
lightness is the parameter which describes the scale from black to white