| Property | Usage | Where Used | Extra Notes |
|---|---|---|---|
| display | Defines element type | Layout | block, inline, flex, grid |
| position | Positioning element | Layout | static, relative, absolute, fixed |
| top / left / right / bottom | Move positioned elements | Layout | Works with position |
| z-index | Layer order | Overlapping elements | Higher = on top |
| width / height | Set size | All elements | px, %, vw, vh |
| margin | Outer spacing | Layout | Space outside element |
| padding | Inner spacing | Layout | Space inside element |
| box-sizing | Size calculation | Layout | border-box recommended |
| color | Text color | Text | name, hex, rgb |
| font-size | Text size | Text | px, em, rem |
| font-family | Font style | Text | Fallback fonts |
| font-weight | Text thickness | Text | normal, bold, 100–900 |
| text-align | Text alignment | Text | left, center, right |
| background-color | Background color | UI | Any color format |
| background-image | Background image | UI | url(), gradients |
| background-size | Image size | Background | cover, contain |
| border | Border around element | UI | width style color |
| border-radius | Rounded corners | UI | px or % |
| box-shadow | Shadow effect | UI | x y blur color |
| display: flex | Flex layout | Responsive design | One-dimensional |
| justify-content | Horizontal alignment | Flexbox | center, space-between |
| align-items | Vertical alignment | Flexbox | center, stretch |
| transition | Smooth change | Hover effects | time + property |
| transform | Scale, rotate | Animations | scale(), rotate() |
| animation | Keyframe animation | Advanced effects | Uses @keyframes |
| opacity | Transparency | UI | 0 to 1 |
| overflow | Content overflow | Containers | hidden, scroll |