CSS: The Pain & The Beauty Course

01

Selectors, Properties & The Cascade

Select what to style, declare how to style it. The 'C' in CSS stands for Cascade (not 'Cool' or 'Cats').

🧠 Note for the confused:
CSS makes HTML look less like a document from 1992 and more like a modern website. Without CSS, the web would look like a wall of text. With CSS, it looks like a BEAUTIFUL wall of text.

/* Selector { property: value; } */
body {
  font-family: sans-serif;
  background: #1a1a2e;
  color: white;
  margin: 0;
}

/* Element selector */
h1 { color: #e94560; }

/* Class selector */
.card { background: #16213e; padding: 20px; border-radius: 10px; }

/* ID selector */
#special { border: 2px solid gold; }

/* Multiple */
h1, h2, h3 { font-weight: bold; }

/* Descendant */
.card p { font-size: 14px; color: #ccc; }

/* The cascade: later rules override earlier ones */
p { color: blue; }
p { color: red; }  /* <-- wins */

02

The Box Model (Boxes. Everywhere.)

Content + Padding + Border + Margin = Box. EVERYTHING on a webpage is a box. You are a box. I am a box. We are all boxes.

🧠 Note for the confused:
CSS selectors are how you choose which elements to style. 'p { color: red; }' = 'all paragraphs should be red.' It's like being a dictator but for web design. 'EVERYTHING BLUE!'

.box {
  width: 200px;
  height: 100px;
  padding: 20px;       /* space INSIDE the box */
  border: 3px solid red; /* the box WALL */
  margin: 10px;          /* space OUTSIDE the box */
}

/* box-sizing: border-box saves your sanity */
* { box-sizing: border-box; }
/* Now width INCLUDES padding and border. You're welcome. */

/* Margin collapse: two margins become one */
/* Top margin of box1 and bottom of box2? Only the bigger one wins. */

/* Padding vs Margin:
   Padding = bubble wrap INSIDE the box
   Margin = personal space BETWEEN boxes */

03

Colors, Fonts & Making Things Pretty

Hex codes, RGB, HSL, Google Fonts. Who knew there were 50 ways to say 'blue'?

🧠 Note for the confused:
The Box Model is CSS's way of putting everything in boxes. Content is the filling. Padding is the bubble wrap. Border is the cardboard. Margin is the space between packages on the delivery truck.

/* Colors */
.hex { color: #ff5733; }
.rgb { color: rgb(255, 87, 51); }
.rgba { color: rgba(255, 87, 51, 0.5); }  /* a = opacity */
.hsl { color: hsl(12, 100%, 60%); }

/* Gradients */
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto');
body { font-family: 'Roboto', sans-serif; }

/* Text styling */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.4;
}

04

Flexbox: 1D Layout That Actually Works

Flexbox arranges things in a row or column. It's like playing Tetris but the blocks actually cooperate (unlike real Tetris).

🧠 Note for the confused:
Flexbox is CSS's way of arranging items in a row or column. It's like playing Tetris but the blocks actually do what you want. Mostly. Sometimes they still misbehave and you question your career choices.

.container {
  display: flex;          /* activates flexbox */
  flex-direction: row;    /* default: left to right */
  justify-content: center; /* main axis alignment */
  align-items: center;     /* cross axis alignment */
  flex-wrap: wrap;         /* allow items to wrap */
  gap: 16px;               /* space between items */
}

.item {
  flex: 1;                 /* grow equally */
  /* flex: 0 0 200px;      don't grow, don't shrink, 200px wide */
  min-width: 0;
}

/* Centering a div (THE MEME) */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
/* Yes, it's 3 lines. The meme is dead. */

05

Grid: 2D Layout For When Flex Isn't Enough

Rows AND columns. Like Flexbox drank a Red Bull and became a spreadsheet. Finally, web layouts that aren't held together by duct tape.

🧠 Note for the confused:
Grid is Flexbox's cooler, more organized cousin. Two-dimensional layout. Rows AND columns. It's like having a spreadsheet for your webpage layout. If spreadsheets were fun (they're not, but Grid comes close).

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  gap: 20px;
}

/* Named areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Auto-fit: responsive without media queries */
.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

06

Responsive Design & Media Queries

Make your site look good on phones, tablets, desktops, and that guy with THREE monitors. It's 2026. If your site isn't responsive, you're basically sending people to a GeoCities page.

🧠 Note for the confused:
Responsive design is making your website look good on phones, tablets, and those weird ultrawide monitors. Media queries are like asking 'how big is your screen?' then adjusting your outfit accordingly.

/* Mobile-first approach */
body { font-size: 16px; }

/* Tablet */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  body { font-size: 20px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Dark mode is BASICALLY required now */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* Don't show this on print */
@media print {
  .ads, .sidebar, .nav { display: none !important; }
}

/* Device pixel ratio (retina displays) */
@media (-webkit-min-device-pixel-ratio: 2) {
  img { image-rendering: crisp-edges; }
}