University Logo

CSS Complete Cheatsheet & Notes

Selectors

  • * — Universal selector
  • element — Type selector (e.g., div, p)
  • .classname — Class selector
  • #id — ID selector
  • [attr] — Attribute selector
  • :hover, :focus — Pseudo-classes
  • ::before, ::after — Pseudo-elements
  • div > p — Child selector
  • div p — Descendant selector
  • div + p — Adjacent sibling selector

Colors & Backgrounds

  • color — Text color
  • background-color — Background fill
  • background-image — Add an image
  • background-repeat — repeat | no-repeat | repeat-x
  • background-size — cover | contain | auto
  • opacity — 0 → 1 transparency
  • gradient — linear-gradient(), radial-gradient()

Fonts & Text

  • font-family — Arial, Verdana, etc.
  • font-size — px, em, rem, %
  • font-weight — normal | bold | 100–900
  • line-height — space between lines
  • text-align — left | center | right | justify
  • text-transform — uppercase | lowercase
  • text-decoration — none | underline
  • letter-spacing, word-spacing

Box Model

  • width / height
  • padding — space inside border
  • margin — space outside border
  • border — width style color
  • box-sizing — content-box | border-box
  • overflow — hidden | scroll | auto
  • display — block | inline | inline-block | flex

Flexbox

  • display: flex;
  • flex-direction — row | column
  • justify-content — center | space-between | space-around
  • align-items — center | flex-start | flex-end
  • flex-wrap — wrap | nowrap
  • gap — spacing between items
  • align-self — override individual alignment

CSS Grid

  • display: grid;
  • grid-template-columns — repeat(3, 1fr)
  • grid-template-rows
  • gap — grid spacing
  • justify-items, align-items
  • grid-column, grid-row
  • place-items — shorthand for align + justify

Positioning

  • position — static | relative | absolute | fixed | sticky
  • top, right, bottom, left
  • z-index — stack order
  • float — left | right
  • clear — none | left | right | both

Animation & Transition

  • transition — property duration timing-function
  • @keyframes — define animations
  • animation-name, animation-duration
  • animation-iteration-count — infinite | 1
  • animation-delay
  • animation-timing-function — ease | linear

Responsive Design

  • @media (max-width: 600px) — for mobile
  • <meta name="viewport" content="width=device-width, initial-scale=1">
  • flex and grid for layouts
  • relative units — em, rem, %, vw, vh
  • object-fit, aspect-ratio for images

CSS Variables

  • :root { --main-color: #333; }
  • color: var(--main-color);
  • Custom reusable design tokens