Markup CityISSUE #9 of 39

inline styles · before css arrived

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysThe style attribute lets you apply CSS directly to one element — handy for quick tests, but messy at scale.

Before you learn full CSS, know that any element accepts a style attribute holding CSS declarations: <p style="color:red;font-size:20px">. This is inline CSS.

It's the quickest way to try a style, but it doesn't scale: you'd repeat yourself on every element, can't reuse rules, and it overrides stylesheet rules in confusing ways. Use inline styling for one-off tweaks and learning; move to a stylesheet for real work.

Power-ups you unlock

style="property:value;property:value" on any element
Fastest way to test a single style
Does not scale — no reuse, lots of repetition
Prefer external/internal CSS for real work

The Unclosed Tag attacks — common mistakes

Styling dozens of elements inline instead of one CSS rule
Fighting inline styles later — they beat most stylesheet rules
Using HTML attributes like bgcolor/align (deprecated — use CSS)

Boss battleStyle the heading inline, then move that same style into a <style> block in the head and delete the inline version. Same result, cleaner source.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;font-family:sans-serif">
  <h1 style="color:#b388ff">inline styled heading</h1>
  <p style="color:#8aff9d;font-size:18px">inline styled paragraph</p>
</body></html>

▶ Open the interactive comic issue

‹ Paragraphs · The Workhorse Tag Bold · Italic · Mark · The Formatters ›