CSS: Writing & Tools

Adding CSS to HTML

There are three ways to apply CSS to HTML:

<!-- 1. External stylesheet (best practice) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Internal stylesheet (inside <head>) -->
<style>
  h1 { color: blue; }
</style>

<!-- 3. Inline style (avoid — hard to maintain) -->
<h1 style="color: blue;">Title</h1>

External stylesheets are the best practice: they separate content from presentation and can be cached by the browser.

Editors

VS Code — install CSS Peek, Stylelint, and Tailwind CSS IntelliSense extensions
WebStorm — JetBrains IDE with excellent CSS autocomplete
Sublime Text — lightweight with good syntax highlighting
CodePen / JSFiddle — online playgrounds for quick experiments

Browser DevTools

The Styles panel in DevTools (F12) is the best way to debug CSS:

See all rules applied to an element (inherited vs explicit)
Edit properties and see changes live
Toggle rules on/off to debug conflicts
See the box model diagram (content/padding/border/margin)
Computed tab to see final values after cascading

Tools and resources

Tool	What it does
caniuse.com	Check browser support for CSS features
Autoprefixer	Add vendor prefixes automatically
MDN CSS Reference	Complete, authoritative docs
CSS Tricks Almanac	Friendly explanation of every property

Popular CSS frameworks

Framework	Approach	Best for
Tailwind CSS	Utility-first (this site!)	Rapid prototyping, custom designs
Bootstrap	Component library (pre-styled)	Quick standard-looking sites
Bulma	Modern, Flexbox-based	Clean design quickly
Open Props	Design tokens, unopinionated	Custom CSS with consistent variables

Responsive design with media queries

/* Mobile-first: styles apply by default, then override for larger screens */
.container { display: grid; grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .container { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .container { grid-template-columns: 1fr 1fr 1fr; }
}

Quick check below!