css.handbook

/* what is css */

CSS gives your HTML a look, a layout, and a personality.

CSS - Cascading Style Sheets - is the styling language of the web. If HTML is the skeleton of a page, CSS is everything you actually see: color, spacing, typography, layout, and motion.

CSS1CSS2CSS3Modern CSS

html · css · javascript

HTMLStructure — the skeleton

CSSPresentation — the skin & style

JSBehavior — the nerves & muscles

/* why css is used */

Separates content from presentation
One stylesheet can restyle an entire site
Enables responsive, mobile-first layouts
Adds motion & depth without JavaScript

/* what if there was no css */

Every page would render as plain, unstyled text — one font, black on white, top to bottom, with links underlined in blue. No colors, no layout, no responsiveness. CSS is what turns a document into a designed product people enjoy using.

Welcome to my site. This is a link. This is a paragraph of text, rendered exactly the way the browser's defaults decide, with no say from the author at all.

/* how css works — the rendering pipeline */

From a stylesheet to pixels on screen

HTML → DOM

CSS → CSSOM

Render Tree

Layout

Paint

Composite

The browser parses your HTML into a DOM tree and your CSS into a CSSOM tree, merges them into a render tree, calculates the exact position and size of every box (layout), draws the pixels (paint), and finally merges layers on the GPU (composite).

/* types of css */

Inline

<p style="color:red">Hi</p>

Written directly on one element. Highest priority, hardest to maintain.

Internal

<style>
  p { color: red; }
</style>

Lives in a <style> tag inside <head>. Good for single-page demos.

External

<link rel="stylesheet"
  href="styles.css">

A separate .css file, linked in. Reusable across every page.

/* the box model — every element is a box */

Content → Padding → Border → Margin

margin

border

padding

content

box-sizing: border-box makes width & height include padding and border — the layout behavior most modern resets turn on by default.

/* where css is used */

Websites

Web apps

HTML emails

Browser extensions

Hybrid mobile apps

Print & PDF stylesheets

/* is css helpful? */

Yes — it's the only language built purpose-first for visual design on the web. Nothing else lets one file restyle thousands of pages instantly, adapt to any screen size, and add motion without touching your markup or logic.

/* features */

Cascade & Inheritance

Rules stack in order; children inherit from parents.

Flexbox & Grid

1D and 2D layout systems for any interface shape.

Custom Properties

Reusable --variables that themes and JS can update live.

Transitions & Animations

Smooth state changes with @keyframes and easing.

Responsive Units

%, vw/vh, rem, and clamp() adapt to every screen.

Modern Functions

calc(), min(), max(), clamp() do math right in your CSS.

/* cheat sheet */

Concept	Example
Selector	.card, #nav, div > p
Flexbox	display:flex; justify-content:center;
Grid	display:grid; grid-template-columns:1fr 1fr;
Variables	--accent:#7C5CFF; color:var(--accent);
Media query	@media (max-width:768px){ ... }
Transition	transition: all .3s ease;
Animation	@keyframes spin{ to{transform:rotate(360deg)} }

/* the future of css */

What's landing next

Container Queries (@container)

:has() — the parent selector

Native CSS Nesting

Cascade Layers (@layer)

color-mix() & wide-gamut color

Scroll-driven animations

/* take it with you */

Grab the complete CSS notes as a file

Includes the box model, cascade, cheat sheet, and interview quick-recall list.

All Categories