CSS Crash Course

/* Basic rule: selector { property: value; } */
h1 { color: navy; font-size: 2rem; }

/* Class selector */
.card { background: white; border-radius: 8px; }

/* ID selector (highest specificity, use sparingly) */
#header { position: sticky; top: 0; }

/* Descendant: p inside .card */
.card p { color: #374151; }

/* Direct child */
.nav > a { font-weight: 600; }

/* Multiple selectors */
h1, h2, h3 { font-family: Georgia, serif; }

/* Attribute selector */
input[type="email"] { border: 2px solid #3b82f6; }

/* Universal selector */
* { box-sizing: border-box; }

/* Always set this — makes width include padding and border */
* { box-sizing: border-box; }

.box {
    width:   300px;
    height:  200px;

    /* Padding — space inside the border */
    padding: 16px;              /* all sides */
    padding: 8px 16px;         /* top/bottom  left/right */
    padding: 4px 8px 12px 16px; /* top right bottom left */

    /* Border */
    border:        2px solid #3b82f6;
    border-radius: 8px;

    /* Margin — space outside the border */
    margin: 16px auto;  /* auto centers horizontally */

    /* Overflow */
    overflow: hidden;   /* hidden | scroll | auto */
}

body {
    font-family:  'Inter', system-ui, sans-serif;
    font-size:    16px;      /* base size */
    line-height:  1.6;       /* unitless recommended */
    color:        #111827;
}

h1 {
    font-size:    2.5rem;    /* relative to root (16px) */
    font-weight:  700;
    letter-spacing: -0.05em;
    text-wrap:    balance;   /* modern: even line lengths */
}

p {
    font-size:    1rem;
    max-width:    65ch;      /* ~65 characters — readable line length */
    text-align:   left;      /* avoid justify for body text on web */
}

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

.element {
    /* Color formats */
    color: #f97316;            /* hex */
    color: rgb(249, 115, 22);  /* rgb */
    color: hsl(24, 95%, 53%);  /* hsl */
    color: oklch(0.7 0.2 50);  /* modern — perceptually uniform */

    /* Opacity */
    color: rgb(249 115 22 / 0.5); /* 50% transparent */

    /* Backgrounds */
    background-color: #1B3A5C;
    background-image: url('bg.jpg');
    background-size:  cover;
    background-position: center;

    /* Gradient */
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    background: radial-gradient(circle at center, #3b82f6, #1e3a8a);
}

/* display values */
.block   { display: block; }     /* full width, new line */
.inline  { display: inline; }    /* flows with text */
.iblock  { display: inline-block; } /* inline but accepts width/height */
.hidden  { display: none; }     /* removed from layout */

/* position */
.relative { position: relative; }  /* offset from normal position */
.absolute {
    position: absolute;   /* relative to nearest positioned ancestor */
    top: 0; right: 0;
}
.sticky {
    position: sticky;
    top: 0;              /* sticks when scrolled to this offset */
}
.fixed {
    position: fixed;     /* relative to viewport, stays on screen */
    bottom: 20px; right: 20px;
}

/* z-index — stacking order */
.modal   { z-index: 100; }
.overlay { z-index: 99; }

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

/* justify-content values */
/* flex-start | flex-end | center | space-between | space-around | space-evenly */

/* align-items values */
/* flex-start | flex-end | center | stretch | baseline */

.item {
    flex:    1;        /* grow to fill available space equally */
    flex:    0 0 200px; /* don't grow, don't shrink, fixed 200px */
    order:   2;        /* visual order (default: 0) */
    align-self: flex-end; /* override align-items for this item */
}

.grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
    grid-template-rows:    auto 1fr auto;    /* header, main, footer */
    gap:                   24px;
}

/* Responsive grid — auto-fill columns, min 250px each */
.auto-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:                   16px;
}

/* Spanning columns / rows */
.hero    { grid-column: 1 / -1; }    /* span all columns */
.sidebar { grid-row:    1 / 3; }    /* span 2 rows */

/* Named areas */
.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }

/* Mobile-first approach: default styles = mobile */
.container { padding: 16px; }

/* Then add styles for larger screens */
@media (min-width: 640px)  { /* sm — tablet */
    .container { padding: 24px; }
}

@media (min-width: 1024px) { /* lg — desktop */
    .container { max-width: 1200px; margin: 0 auto; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body { background: #0f172a; color: #e2e8f0; }
}

/* Fluid typography with clamp() */
h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* min: 1.5rem | preferred: 5vw | max: 3rem */
}

/* Aspect ratio */
.video-wrapper { aspect-ratio: 16 / 9; }

/* Transition — smooth change between states */
.button {
    background:  #f97316;
    transition:  background 0.2s ease, transform 0.15s ease;
}
.button:hover {
    background:  #ea580c;
    transform:   translateY(-2px);
}

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

.card {
    animation: fadeIn 0.4s ease both;
}

/* Infinite spin */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    animation: spin 1s linear infinite;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Define variables on :root — available everywhere */
:root {
    --color-primary:   #f97316;
    --color-navy:      #1B3A5C;
    --font-sans:       'Inter', sans-serif;
    --radius:          8px;
    --space-4:         1rem;
    --space-8:         2rem;
}

/* Use them with var() */
.button {
    background:    var(--color-primary);
    border-radius: var(--radius);
    padding:       var(--space-4) var(--space-8);
    font-family:   var(--font-sans);
}

/* Override locally for dark mode */
[data-theme="dark"] {
    --color-primary: #fb923c;
}

/* Fallback value */
.card { color: var(--text-color, #111827); }

/* Pseudo-classes — element state */
a:hover         { color: #f97316; }
button:focus    { outline: 2px solid #f97316; }
input:disabled  { opacity: 0.5; }
li:first-child  { font-weight: bold; }
li:last-child   { border-bottom: none; }
li:nth-child(2n) { background: #f9fafb; } /* even rows */
p:not(.special) { color: #374151; }

/* Pseudo-elements — generated content */
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--color-primary);
}

p::first-line  { font-weight: 600; }
p::first-letter { font-size: 2em; float: left; }

::selection {
    background: #f97316;
    color: white;
}

/* Container queries — style based on parent width, not viewport */
.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
    .card { flex-direction: row; }
}

/* Nesting (now supported natively) */
.card {
    background: white;

    &:hover { transform: translateY(-4px); }

    & .title { font-size: 1.25rem; }
}

/* :has() — parent selector */
form:has(input:invalid) {
    border-color: red;
}

/* Logical properties — writing-mode aware */
.box {
    margin-inline:  auto;    /* left + right */
    padding-block:  2rem;   /* top + bottom */
    border-inline-start: 4px solid #f97316; /* left in LTR */
}