Language Notes

CSS

Flexbox, Grid, animations, custom properties, responsive design, and modern CSS techniques.

Back to Resources

Basics

CSS (Cascading Style Sheets) controls the visual presentation of HTML documents layout, colors, typography, and animations.

Linking CSS
<link rel="stylesheet" href="style.css" />

Selectors

  • element Type selector (h1, p)
  • .class Class selector
  • #id ID selector
  • [attr] Attribute selector
  • :hover, :focus, :nth-child() Pseudo-classes
  • ::before, ::after Pseudo-elements

Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Flexbox Container
.container {
  display: flex;
  justify-content: center;    /* main axis */
  align-items: center;        /* cross axis */
  gap: 1rem;
  flex-wrap: wrap;
}

.item {
  flex: 1;                    /* grow equally */
  flex-basis: 200px;          /* starting width */
}

Key Properties

  • flex-direction: row | column | row-reverse | column-reverse
  • justify-content: flex-start | center | space-between | space-around | space-evenly
  • align-items: stretch | center | flex-start | flex-end | baseline
  • flex-wrap: nowrap | wrap | wrap-reverse
  • gap: spacing between flex items

CSS Grid

CSS Grid is a two-dimensional layout system perfect for complex page layouts.

Grid Layout
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 2rem;
}

.span-2 {
  grid-column: span 2;
}

Custom Properties (Variables)

CSS Variables
:root {
  --primary: #c4f026;
  --bg: #0f0e0c;
  --text: #f0ece6;
  --radius: 12px;
}

.card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
}

Animations & Transitions

Transitions & Keyframes
/* Transition */
.button {
  transition: transform 0.3s ease, background 0.3s;
}
.button:hover {
  transform: scale(1.05);
}

/* Keyframe Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.element {
  animation: fadeIn 0.6s ease forwards;
}

Best Practices

  • Use CSS custom properties for theming
  • Mobile-first approach with min-width media queries
  • Prefer rem and em over px for scalability
  • Use Flexbox for 1D layouts, Grid for 2D layouts
  • Minimise specificity avoid !important
  • Use clamp() for fluid typography
  • Leverage gap instead of margins for spacing in flex/grid
HTML JavaScript '