The Power of CSS

Here are some resource I think useful based on my experience.

% : When use in width, margin, padding, it means the percent relative to the width of the containing block.

Frequently used (Sort by frequency) : font-size, font-family, line-height, font-weight.
Interesting (Sort by interest) : font-variant, font-style.

Frequently used (Sort by frequency) : word-break, text-align.
Interesting (Sort by interest) : letter-spacing, word-spacing, text-indent, text-transform, white-space.

Frequently used (Sort by frequency) : object-fit, background-image.
Interesting (Sort by interest) : background - linear-gradient(), radial-gradient().

Understand width, height, overflow, margin, padding, border.
box-sizing : Read this to understand the difference between border-box and content-box.
Get the concept of max-width, min-width, max-height, min-height.
Interesting : box-shadow, border-radius, outline.
display: none vs visibility: hidden.

static : Default. Normal position.
relative : Relative to normal position. Using top, right, bottom, left to set the offsets. Space is created for the element.
absolute : Relative to its closest positioned ancestor. Using top, right, bottom, left to set the offsets. Space is NOT created for the element.
fixed : Relative to the viewport. Using top, right, bottom, left to set the offsets. Space is NOT created for the element.
sticky : Looks like static at first, absolute or fixed when scrolling over a threshold. Relative to its nearest scrolling ancestor. Space is created for the element.
z-index : Decide how elements are layered when they overlap.

none : Default.
left, right : Places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
clear : An element must be moved below floating elements before it.