CSS is easy to pick up but hard to master because of its countless confusing properties. Especially those shorthands can accept multiple values of multiple data types in any order.
This is a curated list of top 10 important CSS properties you must know ranked by their usage frequency and complexity.
- background - The shorthand property sets all background style properties at once, such as color, image, origin and size, or repeat method.
- border - The shorthand property sets an element’s border. It sets the values of
border-width, border-style, and border-color.
- display - It sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
- position - It sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
- z-index - It sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
- float - It places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
- clear - It sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
- box-shadow - It adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
- transition - A shorthand property to define the transition between two states of an element. Different states may be defined using pseudo-classes like
:hover or :active or dynamically set using JavaScript.
- transform - It lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.