Essential CSS styling from core document formatting to modern flex layouts (pre-responsive).
| Property | Description | Common Values / Syntax |
|---|---|---|
width / height |
Defines the explicit dimensions of an element's content area. | 300px, 50%, auto |
max-width / min-width |
Constrains width boundaries; prevents element overflow or collapsing. | 1200px, 100%, 280px |
padding |
Inner clearance between content and the border (TRBL clockwise). | 16px, 10px 20px |
margin |
Outer clearance outside the border pushing adjacent elements away. | 0 auto, 24px |
box-sizing |
Includes padding and border inside the stated width/height calculations. | border-box (recommended) |
border |
Shorthand for width, line style, and color perimeter around the element. | 1px solid #e2e8f0 |
border-radius |
Rounds container corners; allows circular shapes with 50%. | 4px, 8px, 50% |
overflow |
Handles content spilling past dimensions: visible, hidden, scroll, auto. | hidden, auto |
| Property | Description | Common Values / Syntax |
|---|---|---|
font-family |
Specifies typeface stack and generic fallbacks. | 'Inter', sans-serif |
font-size |
Sets the text scale using absolute or relative units. | 16px, 1rem, 1.25em |
font-weight |
Controls character thickness from ultra-thin to heavy bold. | 400 (normal), 600, 700 (bold) |
line-height |
Controls vertical distance between baselines for readability. | 1.5, 1.6, 24px |
text-align |
Horizontal alignment of inline content inside block containers. | left, center, right, justify |
text-decoration |
Adds or suppresses text lines (underlines on links, strikethroughs). | none, underline |
text-transform |
Transforms text casing dynamically without editing markup. | uppercase, capitalize |
letter-spacing |
Adjusts tracking/spacing between individual characters. | 0.5px, -0.02em |
| Property | Description | Common Values / Syntax |
|---|---|---|
color |
Sets the foreground text and icon color. | #0f172a, rgba(0,0,0,0.8) |
background-color |
Fills the element background area with a solid color. | #ffffff, transparent |
background-image |
Sets graphic assets or gradients behind content. | url('...'), linear-gradient() |
background-size |
Determines image scaling across the container. | cover, contain, auto |
background-repeat |
Controls whether background tiles horizontally and vertically. | no-repeat, repeat-x |
background-position |
Sets the starting origin of background artwork. | center, top left |
opacity |
Sets transparency for the entire element, including all children. | 0.85, 0 (invisible), 1 |
| Property | Description | Common Values / Syntax |
|---|---|---|
display: block |
Breaks onto a new line, consumes full container width. | <div>, <p>, <section> |
display: inline |
Flows alongside text; ignores vertical dimensions/margins. | <span>, <a>, <strong> |
display: inline-block |
Flows inline with text while respecting width, height, and margins. | buttons, inline chips |
display: none |
Removes element completely from rendering and accessibility tree. | display: none; |
visibility |
Hides element while keeping its exact physical space in layout flow. | hidden, visible |
| Property | Description | Common Values / Syntax |
|---|---|---|
position |
Alters positioning scheme: static, relative, absolute, fixed, sticky. | relative, absolute, fixed |
top / right / bottom / left |
Offset coordinates from flow or nearest positioned parent. | top: 0; right: 10px; |
z-index |
Defines 3D stacking order along the z-axis for positioned items. | 10, 100, 999 |
| Property | Description | Common Values / Syntax |
|---|---|---|
display: flex |
Enables flex formatting context on all direct child elements. | display: flex; |
flex-direction |
Establishes main axis flow direction for flex items. | row, column, row-reverse |
justify-content |
Aligns child items along the main axis. | center, space-between, start |
align-items |
Aligns child items along the cross axis (perpendicular). | center, stretch, flex-start |
gap |
Sets explicit gutter spacing between flex items without margin hacks. | 12px, 1.5rem, 8px 16px |
flex-grow / flex-shrink |
Determines child element growth or compression factor when space varies. | 1, 0 |
align-self |
Overrides parent align-items alignment for a specific single flex item. | flex-end, center |
| Property | Description | Common Values / Syntax |
|---|---|---|
box-shadow |
Casts drop shadows and elevation depth onto element frames. | 0 4px 6px rgba(0,0,0,0.1) |
text-shadow |
Draws subtle shadows behind text characters. | 0 1px 2px rgba(0,0,0,0.2) |
cursor |
Changes pointer icon to signal interaction or disabled states. | pointer, not-allowed, grab |
outline |
Draws non-layout-shifting rings around focused interactive items. | 2px solid #3b82f6 |