Skip to content

CSS Fundamentals

CSS controls how web content is visually presented, and DevOps engineers encounter it when building dashboards, customizing monitoring UIs, or troubleshooting frontend rendering in CI pipelines. Knowing the basics prevents "it looks broken" from becoming a multi-hour debugging session.

Why this matters

Grafana dashboards, MkDocs themes, internal portals, and status pages all use CSS. Even if you never write frontend code professionally, being able to debug a broken layout or tweak a dashboard panel saves time and avoids roundtrips to a frontend engineer.

Key concepts covered

  • The box model: margin, border, padding, content — and how box-sizing changes the math
  • Specificity and the cascade: which rule wins and why !important is almost always wrong
  • Layout modes: block, inline, flexbox, grid — choosing the right tool for the layout
  • Responsive basics: media queries, viewport units, and fluid typography

Contents

Start with the primer, then explore misconceptions and pitfalls before checking out the trivia.

# File What it covers
1 Primer Selectors, the box model, specificity, and the cascade — the core mental model
2 Anti-Primer Widely held CSS myths that cause frustrating layout bugs
3 Footguns & Pitfalls Specificity wars, z-index stacking contexts, and other common traps
4 Street Ops Quick fixes and browser DevTools techniques for real-world CSS debugging
5 Trivia & Interesting Facts Surprising history and edge cases in CSS