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
→ 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
Selectors in CSS
Colors and Gradients
- keywords
Selectors in CSS
Colors and Gradients
- Linear Gradients,
- Radial gradients,
- Conic gradients,
- Repeating gradients
Units in CSS
Selectors in CSS
Units in CSS
ch
- character
- equal to the width of a character in the used font,
rem
- "root em",
px
- pixel,
number
- used for: line-height, opacity,
percentage -
For example, width is calculated as a percentage of the available width in the parent element.
deg - degree
used for rotational properties.
transform: rotate(80deg)
Numbers, Lengths and Percentage
Relative
Lengths
Selectors in CSS
Units in CSS
Numbers, Lengths and Percentage
Selectors in CSS
Units in CSS
Relative
Lengths
Selectors in CSS
Units in CSS
Relative
Lengths
W3_D1
By Yash Priyam
W3_D1
- 145