CSS Essentials¶

The styling layer: how your HTML looks and lays out. For AI demos and dashboards you mainly need selectors, spacing, flexbox/grid, and a theme that doesn't embarrass you.

Table of Contents¶

Installation / Setup
Core Syntax
Common Operations
Practical Examples
Common Patterns
Best Practices
Common Mistakes
Troubleshooting
Related Cheat Sheets
Official Documentation

Installation / Setup¶

Three ways to attach CSS:

<link rel="stylesheet" href="style.css">   <!-- 1. external file (best) -->
<style> body { font-family: sans-serif; } </style>  <!-- 2. in <head> -->
<div style="color: red">…</div>           <!-- 3. inline (avoid) -->

/* style.css */
:root {
  --primary: #2c6fbb;      /* custom property (variable) */
  --radius: 8px;
}
body { margin: 0; font-family: system-ui, sans-serif; }

Core Syntax¶

Selectors¶

Selector	Matches	Example
`tag`	element type	`p`, `table`
`.class`	any element with class	`.card`
`#id`	one element with id	`#results`
`a b`	`b` inside `a` (descendant)	`nav a`
`a > b`	direct child	`ul > li`
`a, b`	either	`h1, h2`
`[attr]` / `[attr="x"]`	attribute	`input[type="text"]`
`:hover`, `:focus`, `:disabled`	state	`button:hover`
`:first-child`, `:nth-child(2)`	position	`tr:nth-child(even)`

.card { ... }
#score { color: green; }
button:hover { opacity: 0.9; }
tr:nth-child(even) { background: #f6f8fa; }

The box model (spacing mental model)¶

┌─ margin (outside) ─────────────┐
│ ┌─ border ───────────────────┐ │
│ │ ┌─ padding ──────────────┐ │ │
│ │ │        content          │ │ │
│ │ └─────────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

.card {
  margin: 12px;          /* space outside */
  padding: 16px 24px;    /* space inside (top/bottom, left/right) */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;  /* width INCLUDES padding+border */
}

Set * { box-sizing: border-box; } once — layout math gets much easier.

Common properties quick table¶

Goal	Property
Text color / bg	`color`, `background-color`
Font	`font-family`, `font-size`, `font-weight`, `line-height`
Space	`margin`, `padding`
Size	`width`, `height`, `max-width`, `min-width`
Border	`border`, `border-radius`, `box-shadow`
Hide	`display: none`, `visibility: hidden`
Overflow	`overflow: auto` (scroll)
Position	`position: relative/absolute/fixed`, `top/left/right/bottom`
Z-order	`z-index` (only on positioned elements)

Common Operations¶

Flexbox (one-dimensional layout — buttons, toolbars, cards in a row)¶

.toolbar {
  display: flex;
  gap: 8px;                    /* space between children */
  justify-content: space-between;  /* main axis: start/center/end/space-around */
  align-items: center;         /* cross axis */
  flex-wrap: wrap;             /* allow wrapping */
}
.child { flex: 1; }            /* grow equally */
.side { flex: 0 0 200px; }     /* fixed 200px, no grow/shrink */

Property	Options that matter
`justify-content`	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`
`align-items`	`stretch`, `flex-start`, `center`, `flex-end`
`flex`	`1` (grow), `0 0 auto`, `1 1 0`
`gap`	spacing between items (modern, use it)

Grid (two-dimensional layout — dashboards)¶

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* 12 equal columns */
  gap: 16px;
}
.plot-large  { grid-column: span 8; }
.plot-small  { grid-column: span 4; }
.sidebar     { grid-column: span 3; }
.main        { grid-column: span 9; }

.simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;                     /* responsive cards with one line */
}

Responsive basics¶

img { max-width: 100%; height: auto; }   /* images shrink on mobile */

@media (max-width: 768px) {
  .dashboard { grid-template-columns: 1fr; }   /* stack on phones */
  .plot-large, .plot-small { grid-column: span 1; }
}

Practical Examples¶

1. Card grid for model results¶

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 16px;
  background: white;
}
.card h3 { margin-top: 0; }
.metric { font-size: 1.5rem; font-weight: 700; color: var(--primary); }

<div class="grid">
  <div class="card"><h3>Accuracy</h3><div class="metric">0.91</div></div>
  <div class="card"><h3>F1</h3><div class="metric">0.88</div></div>
</div>

2. Status badge + result styling¶

.badge { padding: 2px 10px; border-radius: 999px; font-size: .85em; }
.badge.ok    { background: #dafbe1; color: #1a7f37; }
.badge.warn  { background: #fff8c5; color: #9a6700; }
.badge.error { background: #ffebe9; color: #cf222e; }

/* Bar chart from plain divs */
.bar { background: var(--primary); height: 18px; border-radius: 4px; }

3. Center anything + top bar¶

.center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid #e1e4e8;
}

Common Patterns¶

/* Consistent look with variables */
:root {
  --primary: #2c6fbb;
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #656d76;
  --border: #d0d7de;
}
body { background: var(--bg); color: var(--text); }

/* Reset-ish baseline */
* { box-sizing: border-box; }
body { margin: 0; }
img, video { max-width: 100%; }

/* Simple table styling */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #f6f8fa; }

Best Practices¶

Think layout first: flexbox for one axis, grid for two. Both beat floats/margins hacks.
Use gap instead of margin hacks between siblings.
Keep it accessible: readable contrast, not tiny text, focus styles, prefers-reduced-motion.
Don't fight the browser default — reset margins, box-sizing, then add.
Mobile-first: a single-column layout that widens with min-width queries is easiest.
Class names describe what (.metric), not how (.red-text).
For a clean AI demo, a CSS framework like Pico/MVP.css gives you a polished baseline in one <link>.

Common Mistakes¶

Mistake	Consequence	Fix
`box-sizing` forgotten	Widths overflow parents	Global border-box reset
Flex children shrink to nothing	Squished cards	`flex: 1 1 0` or `min-width`
Centering with margins	Nothing happens	Flexbox/grid centering
`width: 100%` + padding	Overflow (double counting)	border-box
Styling by id everywhere	Reuse impossible	Classes
`!important` fights	Specificity wars	Restructure or raise specificity cleanly
Absolute px everywhere	Broken on small screens	`rem`, `%`, `minmax`, media queries

Troubleshooting¶

Symptom	Cause	Fix
Style not applying	Specificity / load order	DevTools → Computed shows which rule wins
Element wider than screen	border-box missing	Add box-sizing reset
Flex items wrap oddly	Missing `flex-wrap`/min-width	Set `flex-wrap` or `flex-basis`
Grid items overlap	Sparse/undefined columns	Define template; check spans
Changes not visible	Cache	Hard refresh; disable cache in DevTools
Layout fine in one browser only	Old syntax	Use autoprefixer or modern baseline; check caniuse

html.md — the structure CSS styles
javascript.md — toggling classes, inline styles
Apps & UI — Streamlit/Gradio hide most CSS, but theming helps
matplotlib.md — colors for web charts
Home · Central Navigation Index

Official Documentation¶

Last Updated¶

2026-09-06 — Initial version.

CSS Essentials¶

Table of Contents¶

Installation / Setup¶

Core Syntax¶

Selectors¶

The box model (spacing mental model)¶

Common properties quick table¶

Common Operations¶

Flexbox (one-dimensional layout — buttons, toolbars, cards in a row)¶

Grid (two-dimensional layout — dashboards)¶

Responsive basics¶

Practical Examples¶

1. Card grid for model results¶

2. Status badge + result styling¶

3. Center anything + top bar¶

Common Patterns¶

Best Practices¶

Common Mistakes¶

Troubleshooting¶

Related Cheat Sheets¶

Official Documentation¶

Last Updated¶