HTMLの普及によって様々なホームページが登場し、HTMLを駆使して凝ったデザインのページも作成されるようになりました。 デザインが凝ったページは見た目にも楽しく、沢山の人を引き付ける要素になりました。
でも、デザインを重視することによってHTMLが複雑化していきます。 さらには、タグの本来の意味を無視してまで、デザインの為にタグが使われる事態が発生します。 特に、TABLEタグなどがテーブル（表）とは関係無く、画面のレイアウトの為に使われてしまう件は有名な話です。
本来は、タグ付けによって意味付けされていた文章がデザインの為に利用されてしまうことで、 文章が本来の意味合いを失ったりと深刻な問題が発生するようになりました。
そこで、CSSが登場しました。CSSの担当はデザインとなります。文字サイズや文字の色、 枠をつけたり背景の色などを設定したりデザインに関することが指定できます。 HTMLの要素に対してCSSを関連付ける事でデザインを適用する事ができるようになりました。
CSSの登場によって、HTMLの仕様も整理されデザインに関するタグなどは、再度見直されたり削除されました。 HTMLは文章の記述、CSSはデザインといったすみわけが行われるようになります。
最近では、HTMLではデザインを除いた文章自体の構造に集中して記述し、 デザインに関する事はCSSを使って行う事が一般化しています。
CSSはデザイナーさん。HTMLは文筆家さんみたいな感じで使い分けされるようになったんだよ。
WEBページは、スマートフォンやタブレットなどの普及によって、様々なデバイスからアクセスされるようになりました。 どんなデバイスであっても、ブラウザがあればWEBページを見ることができます。
デバイスによって画面の大きさが違うので、画面サイズの小さいデバイスなどでは、 レイアウトが崩れて表示されたり、 逆に画面が大きいデバイスでは、隙間の多いさみしい表示になったりしました。 そこで、サーバー側でユーザーエージェントなどの情報からデバイスを判定して、出力するHTMLを携帯用／デスクトップＰＣ用など切り替えたりする事も良くありました。
CSSでは、このようなデバイスによっての見え方の違いについても対応することができるようになりました。
CSSを使うことで、デバイスの画面サイズなども考慮に入れて、デザインの指定が可能になりました。 デバイス毎のレイアウトの対応も、 携帯用／デスクトップＰＣ用など、CSSを切り替えてることで実現したり、 1つのCSSの中にデバイスの画面幅に応じた複数の定義を用意する事で実現するようになりました。
このように、画面の大きさが違う複数のレイアウトが必要に場面でも、CSSで対応できるようになりました。
CSS(Cascading Style Sheets)は、HTMLやXMLの要素をどのように修飾するかを指定する為の言語となります。 文章の構造と体裁と分離させるという理念を実現する為にW3C(World Wide Web Consortium)によって策定されました。
CSSのバージョンはレベルと呼ばれていて、CSS3はCSSのレベル3ということになります。