🎨 CSS — Zero to Hero

Master CSS from the basics to modern layout and animations

🎨 What is CSS?

CSS (Cascading Style Sheets) controls the look and feel of HTML elements — colors, layout, fonts, animations, and more.

🎯 Selectors

Target any HTML element precisely.

📦 Box Model

Every element is a box with margin, border, padding.

↔️ Flexbox & Grid

Modern, powerful layout systems.

✨ Animations

Smooth transitions and keyframe animations.

/* 3 ways to add CSS */

/* 1. Inline */
<p style="color:red">Hello</p>

/* 2. Internal (inside <head>) */
<style> p { color: red; } </style>

/* 3. External (recommended) */
<link rel="stylesheet" href="style.css">

🎯 Selectors

Selector	Example	Targets
Element	`p`	All <p> tags
Class	`.card`	Elements with class="card"
ID	`#header`	Element with id="header"
Descendant	`div p`	<p> inside <div>
Child	`ul > li`	Direct <li> children of <ul>
Group	`h1, h2, h3`	All headings
Attribute	`[type="text"]`	Input with type text

/* Specificity order: ID > Class > Element */
p          { color: black; }   /* specificity: 1 */
.highlight { color: blue; }    /* specificity: 10 */
#title     { color: red; }     /* specificity: 100 */

📦 Box Model

Every element is a rectangular box. From inside out: content → padding → border → margin.

.box {
  width:   200px;
  padding: 16px;          /* space inside */
  border:  2px solid #333; /* border around */
  margin:  24px;          /* space outside */

  /* Makes width include padding+border */
  box-sizing: border-box;
}

/* Apply border-box globally (best practice) */
* { box-sizing: border-box; }

🌈 Colors

.element {
  color:            #ff6b6b;          /* hex */
  background-color: rgb(99,102,241);   /* rgb */
  border-color:     hsl(271,91%,65%); /* hsl */
  opacity:          0.8;               /* 0–1 */

  /* Gradient background */
  background: linear-gradient(135deg, #667eea, #764ba2);
}

💡 HSL is best for theming — easy to adjust lightness while keeping the same hue. Example: hsl(270, 70%, 60%)

🔤 Typography

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family:    'Inter', sans-serif;
  font-size:      16px;
  font-weight:    400;
  line-height:    1.6;
  letter-spacing: 0.02em;
  text-align:     left;
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 1.75rem; }
p  { font-size: 1rem; color: #666; }

📐 Display Property

Value	Behavior
`block`	Full width, starts on new line (div, p, h1)
`inline`	Fits content, no width/height (span, a)
`inline-block`	Inline but accepts width/height
`flex`	Flexible row/column layout
`grid`	2D row and column layout
`none`	Hides element completely

↔️ Flexbox

One-dimensional layout — arrange items in a row or column.

.container {
  display:         flex;
  flex-direction:  row;          /* row | column */
  justify-content: space-between;/* main axis */
  align-items:     center;       /* cross axis */
  flex-wrap:       wrap;         /* wrap to next line */
  gap:             1rem;
}

.item {
  flex: 1;          /* grow equally */
  flex-shrink: 0;   /* don't shrink */
}

Live Demo — Flexbox

🔲 CSS Grid

Two-dimensional layout — control both rows and columns.

.grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal cols */
  grid-template-rows:    auto;
  gap:                   1rem;
}

/* Responsive grid */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Span across columns */
.wide { grid-column: span 2; }

Live Demo — Grid

📍 Positioning

Value	Behavior
`static`	Default, normal document flow
`relative`	Offset from its normal position
`absolute`	Removed from flow, relative to nearest positioned parent
`fixed`	Stays fixed to the viewport (navbar, modal)
`sticky`	Scrolls with page until threshold, then sticks

.parent { position: relative; }

.child {
  position: absolute;
  top:    0;
  right:  0;
}

nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
}

🔮 Pseudo-classes & Pseudo-elements

/* Pseudo-classes — element state */
a:hover   { color: blue; }
a:visited { color: purple; }
input:focus { outline: 2px solid blue; }
li:first-child { font-weight: bold; }
li:nth-child(2) { color: red; }

/* Pseudo-elements — virtual elements */
p::first-line { font-weight: bold; }
h1::before    { content: "★ "; color: gold; }
h1::after     { content: " ★"; }

💡 CSS Variables (Custom Properties)

:root {
  --primary:   #e879f9;
  --bg:        #0d1117;
  --text:      #c9d1d9;
  --radius:    8px;
  --spacing:   1rem;
}

.card {
  background:    var(--bg);
  color:         var(--text);
  border-radius: var(--radius);
  padding:       var(--spacing);
  border:        1px solid var(--primary);
}

💡 CSS variables are live — change them in JS with document.documentElement.style.setProperty('--primary', '#ff0') to build theme switchers!

✨ Transitions & Animations

/* Transition — smooth state change */
.btn {
  background:  #e879f9;
  transition:  all 0.3s ease;
}
.btn:hover {
  background:  #a855f7;
  transform:   scale(1.05);
}

/* Keyframe Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeIn 0.5s ease forwards;
}

📱 Responsive Design

/* Mobile-first approach */
.container {
  width: 100%;
  padding: 1rem;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
  .grid      { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 1100px; }
  .grid      { grid-template-columns: repeat(3, 1fr); }
}

🚀 Pro Tips

/* Center anything — the modern way */
.center {
  display:         grid;
  place-items:     center;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Prevent text overflow */
.truncate {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Glassmorphism card */
.glass {
  background:        rgba(255,255,255,0.1);
  backdrop-filter:   blur(10px);
  border:            1px solid rgba(255,255,255,0.2);
  border-radius:     16px;
}

/* Aspect ratio (square image) */
.img-box { aspect-ratio: 1 / 1; object-fit: cover; }

🎉 You now know the core of CSS! Next steps: explore CSS animations, CSS custom properties for theming, and frameworks like Tailwind CSS.