HTMLは文章やブロックをマークアップすることで、意味を持たせる役割がある。例えば、このページの見出し「スタイルシートで何が変わる？」は、ブラウザにとっては、ただの文章でしかない。それを次のようにマークアップしてみる。
<h1>スタイルシートで何が変わる？</h1>
こうすると、ブラウザはこの文章がページの見出しだと理解する。ブラウザは<h1></h1>でマークアップされた文章は見出しだから、文字を大きく表示する。だから、スタイルイシートを設定する前の見出し１はとても大きいのだ。
スタイルシートという仕組みが出来るまでは、HTMLでデザインをコントロールするしか出来なかった。例えば、<font></font>というHTML要素がある。これは文字の大きさや色をコントロールするタグ。この仕組みはHTMLの意味付けするという役割とは違う役目を果たす。つまり、「この文章の文字の大きさは大で、色は青色」と指定する<font></font>は、意味付けではなくて、見た目のデザインをコントロールするということ。そこで、生まれたのがスタイルシートという考え方。HTMLは意味付けを、スタイルシートはデザインのコントロールを。二つに分けることで、いろいろな利点が生まれたわけだ。