CSS3 Complete Reference

1. Syntax & Structure

selector {
  property: value; /* Declaration */
  property2: value; /* Multiple declarations */
}

• Always end declarations with ; • Use rem/em for spacing, px only for borders • Prefer class over id for styling.

2. Selectors

• .class, #id, element
• element > child (direct), element descendant (any depth)
• :hover, :focus, :nth-child(n), :not()
• [attr="val"], [attr^="prefix"]
• ::before, ::after, ::first-line

3. Box Model

Content → Padding → Border → Margin. Set box-sizing: border-box; globally to include padding/border in width/height.

* { box-sizing: border-box; }
.box { width: 200px; padding: 16px; border: 2px solid; }

4. Typography

font-family: system-ui, sans-serif;
font-size: clamp(1rem, 2vw, 1.5rem);
line-height: 1.6;
letter-spacing: 0.02em;
text-align: justify;
text-decoration: none;
font-weight: 600;

Fluid typography using clamp(). Scales between 1rem and 2rem based on viewport.

5. Colors & Gradients

color: #38bdf8;
background: rgba(56, 189, 248, 0.2);
background: linear-gradient(135deg, #38bdf8, #818cf8);
background: radial-gradient(circle, #fff 0%, transparent 70%);
mix-blend-mode: screen;

6. Flexbox

.container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | space-between | space-around;
  align-items: stretch | center | flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

flex: grow shrink basis • Use for 1D layouts, navbars, cards, centering.

7. CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  align-items: start;
}

Use Grid for 2D layouts (page structure, galleries, dashboards). Combine with Flexbox for components.

8. Transitions

.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56,189,248,0.4);
}

• Only transition transform & opacity for 60fps performance • Avoid width/height transitions.

9. Animations

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.box { animation: pulse 2s infinite ease-in-out; }

animation: name duration timing-function delay iteration-count direction fill-mode;

10. Responsive Design

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { width: 100%; }
}

• Mobile-first: @media (min-width: ...) • Use vh/vw, rem, clamp() • Test with DevTools responsive mode.

11. Modern CSS Features

• :where(), :has(), :is() for clean specificity
• container queries for component-level responsiveness
• aspect-ratio: 16 / 9; • object-fit: cover; • gap in flex/grid
• scroll-snap, scrollbar-color, backdrop-filter