CSS Mastery: From Fundamentals to Advanced Layouts

CSS Color Systems

CSS supports named colors, hexadecimal notation, RGB, HSL, HWB, and modern color functions. Modern interfaces often benefit from relative color manipulation, alpha channels, and perceptual color spaces where browser support permits.

Using custom properties for semantic colors makes themes easier to maintain.

CSS Color Representations

Modern Colors

:root {
  --color-primary: #2563eb;
  --color-text: rgb(15 23 42);
  --color-muted: hsl(215 16% 47%);
  --color-overlay: rgb(0 0 0 / 0.5);
}

💡 CSS supports multiple color representations. Semantic variables prevent colors from being scattered throughout the stylesheet.

Key Takeaways

Use semantic color variables for scalable design systems.
Alpha channels can be expressed directly in modern RGB syntax.

Knowledge Check

Which notation represents an alpha channel in modern RGB syntax?

Backgrounds and Gradients

Backgrounds can use colors, images, gradients, multiple layers, positioning, sizing, repetition, and clipping. Gradients are generated by the browser and do not require image files.

Multiple backgrounds are painted in layers, with the first background image generally appearing closest to the user.

Background Painting Layers

Layered Background

.hero {
  background:
    linear-gradient(rgb(15 23 42 / 0.72), rgb(15 23 42 / 0.72)),
    url("hero.jpg") center / cover no-repeat;
}

💡 The gradient creates an overlay over the image, improving text readability.

Key Takeaways

CSS gradients can replace many decorative raster assets.
Multiple background layers can create sophisticated visual effects.

Knowledge Check

What does `background-size: cover` generally do?

Fonts and Font Stacks

The font-family property defines the preferred typeface. A font stack provides fallbacks in case a preferred font is unavailable.

System font stacks are often excellent for performance because they avoid downloading an additional web font.

Font Stack Selection

System Font Stack

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

💡 The browser chooses the first available font in the stack.

Key Takeaways

Always provide reasonable fallback fonts.
System fonts can provide excellent performance and native appearance.

Knowledge Check

Why are multiple fonts commonly specified in `font-family`?

Font Size, Weight and Line Height

Readable typography depends on more than font size. Weight, line height, letter spacing, measure, contrast, and responsive scaling all affect readability.

Unitless line heights are often useful because the value scales naturally with the inherited font size.

Typography Metrics

Readable Typography

.article {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  max-inline-size: 70ch;
}

.article h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

💡 The ch unit can constrain reading width and clamp() creates responsive typography.

Key Takeaways

Line height has a major impact on readability.
clamp() is useful for fluid typography.
ch can help constrain text measure.

Knowledge Check

Why can a unitless `line-height` be useful?

Colors, Backgrounds and Typography

CSS Color Systems

Backgrounds and Gradients

Fonts and Font Stacks

Font Size, Weight and Line Height

STAY UPDATED WITH BYTES!