この講座は一通りHTMLについて理解している人を対象にしています。HTMLで文書の構造のみを定義し、文書の装飾機能はスタイルシートで行うという考え方が一般的になっています。HTMLにも、文書の装飾のための <font> のようなタグや、bgcolor のような属性もありますが、これらは全てスタイルシートで実現できるため、HTML4.01では非推奨となっています。スタイルシートを使えば、HTMLでは実現できなかったような修飾方法も使えます。見栄えのいい表現力豊かなページデザインには、スタイルシートは不可欠なものとなっています。
Internet Explorer 又は Netscape でこのページをご覧のかたは、この画面上部の 「 style: 」 のプルダウンメニューを切り替えてみてください。同じ HTML文書が異なるスタイルシートを適用した時に見栄えが大いに変わってしまうことを実感してください。このスタイルシートの切替には、Javascript を使っています。
この資料は、小生がスタイルシートを勉強しながらまとめたものです。勉強不十分なため、誤った記述が含まれているかもしれません。若し誤りに気が付かれましたらご指摘いただければ幸いです。
スタイルシートを使う上での基礎知識を下記のページに記載してあります。これらを全て知らないとスタイルシートを使えないという訳ではありませんが、（*）印の項目は初心者といえどもスタイルシートを使うための必要最低限の知識といえます。
各プロパティの説明は、次の夫々のページに記載してあります。夫々のプロパティに対するブラウザのサポート状況は、OS が Windows の場合の Internet Explorer 6、Netscape 7、Opera 7 に限って 
で示しています。OS が Mac の場合、又は古いブラウザに関するサポート状況は示していません。
以下の表は、目次代わりに作成した一覧です。夫々の関連ページにリンクが張ってあります。
| 種別 | プロパティ名 | 機能 | |
|---|---|---|---|
| 色と背景 | color | テキストの色 （文字色） | |
| background-color | 背景色 | ||
| background-image | 背景画像 | ||
| background-repeat | 背景画像のくり返し | ||
| background-attachment | 背景画像の固定 | ||
| background-position | 背景画像の開始位置 | ||
| background-position-x background-position-y *2 |
背景画像の開始位置 | ||
| background | 背景プロパティの一括指定 | ||
| フォント | font-style | フォントのイタリック表示 | |
| font-variant | 小文字を大文字フォントにする | ||
| font-weight | フォントの太さ | ||
| font-size | フォントサイズ | ||
| font-family | フォント名 | ||
| font | フォントプロパティの一括指定 | ||
| font-size-adjust *1 | フォントサイズの調整 | ||
| font-stretch *1 | 長体・平体 | ||
| テキスト | line-height | 行間 | |
| text-align | 文字の左寄せ右寄せ、センタリング | ||
| text-justfy *2 | 均等割付の形式を指定する | ||
| vertical-align | 文字と縦方向の位置そろえ | ||
| text-decoration | 文字のアンダーライン、打消し線等 | ||
| text-underline-position *2 | 下線の表示位置を指定する | ||
| text-indent | テキストのインデント幅 | ||
| text-transform | 大文字、小文字の指定 | ||
| white-space | 空白タブ改行の処理 | ||
| letter-spacing | 文字間の幅 | ||
| word-spacing | 単語の間隔 | ||
| text-autospace *2 | アルファベット等との間隔を指定する | ||
| line-break *2 | 禁則処理を行うかどうかを指定する | ||
| word-break *2 | 文の改行の仕方について指定する | ||
| word-wrap *2 | 単語の途中で改行するかどうか指定する | ||
| text-shadow *1 | 文字に影をつける | ||
| 幅、高さ | width, height | ボックスの横幅、縦幅 | |
| max-width, min-width max-height, min-height |
ボックスの横幅、縦幅の制限 | ||
| マージン パディング |
margin | marginの一括指定 | |
| margin-top, margin-bottom margin-left, margin-right |
上下左右marginの指定 | ||
| padding | paddingの一括指定 | ||
| padding-top, padding-bottom padding-left, padding-right |
上下左右paddingの指定 | ||
| ボーダー | border-style | borderの形状 | |
| border-top-style, border-bottom-style border-left-style, border-right-style |
上下左右borderの形状 | ||
| border-width | borderの太さ | ||
| border-top-width, border-bottom-width border-left-width, border-right-width |
上下左右borderの太さ | ||
| border-color | borderの色 | ||
| border-top-color, border-bottom-color border-left-color, border-right-color |
上下左右borderの色 | ||
| border | borderプロパティの一括指定 | ||
| border-top, border-bottom border-left, border-right |
上下左右borderプロパティの一括指定 | ||
| 表示、配置 | overflow | ボックスに入りきらない表示の表示方法 | |
| overflow-x, overflow-y *2 | ボックスに入りきらない表示の表示方法 | ||
| position | topとleftの指定方法を決める | ||
| top, bottom, left, right | 上下左右からの位置 | ||
| z-index | z-indexを指定する | ||
| float | 文字の回り込みの設定 | ||
| clear | 文字の回り込みを解除する | ||
| display | 要素の表示形式 | ||
| visibility | 可視不可視 | ||
| clip | 表示をどこで切り取るかを指定する | ||
| direction | 文字表記の方向 | ||
| unicode-bidi | 文字方向の組み込みと上書き | ||
| writing-mode *2 | 文字表記の方向 | ||
| テーブル | table-layout | テーブルの表示方法 | |
| border-collapse | セルのボーダーの表示方法 | ||
| border-spacing | セルのボーダーの間隔 | ||
| empty-cells | 空セルのボーダーの表示・非表示 | ||
| caption-side | キャプションの位置 | ||
| リスト | list-style-type | リストの見出し記号 | |
| list-style-image | リストの見出しにグラフィック | ||
| list-style-position | リスト項目の二行目以降のインデント | ||
| list-style | リストのプロパティの一括指定 | ||
| marker-offset *1 | マーカーとの間隔 | ||
| カーソル | cursor | カーソルの形状 | |
| 内容の追加 | content | 内容の追加 | |
| quotes | 引用符の設定 | ||
| counter-increment *1 | 自動連番の値を進める | ||
| counter-reset *1 | 自動連番のリセット | ||
| アウトライン | outline-style | アウトラインの形状 | |
| outline-width | アウトラインの太さ | ||
| outline-color | アウトラインの色 | ||
| outline | アウトライン一括指定 | ||
| 印刷 | page-break-before | 要素前の改ページ | |
| page-break-after | 要素後の改ページ | ||
| size *1 | ページボックスの大きさと向き | ||
| page *1 | 用紙設定を指定する | ||
| marks *1 | トンボの出力 | ||
| page-break-inside *1 | 要素内の改ページ | ||
| widows，orphans *1 | 中途半端な改ページの制御 | ||
| 入力補助 | ime-mode *2 | テキスト入力時のIMEの状態を指定 | |
| スクロールバー | scrollbar-base-color *2 | スクロールバー全体の基本色を指定 | |
| scrollbar-face-color *2 | スクロールバーの表面の色を指定 | ||
| scrollbar-arrow-color *2 | 矢印の部分の色を指定 | ||
| scrollbar-3dlight-color *2 | ボタンの外側の左と上の枠色を指定 | ||
| scrollbar-darkshadow-color *2 | ボタンの外側の右と下の枠色を指定 | ||
| scrollbar-highlight-color *2 | ボタンの内側の左と上の枠色を指定 | ||
| scrollbar-shadow-color *2 | ボタンの内側の右と下の枠色を指定 | ||
| フィルタ、拡大 | filter *2 | 画像・テキストにフィルタ効果を与える | |
| zoom *2 | 拡大・縮小表示 | ||
| レイヤー | layer-background-color *3 | レイヤーの背景色を指定 | |
| layer-background-image *3 | レイヤーの背景画像を指定 | ||
| include-source *3 | 他のHTML文書をレイヤー表示 | ||
| ルビ | ruby-align *2 | ルビの行揃え位置を指定 | |
| ruby-overhang *2 | ルビの表示領域を指定 | ||
| ruby-position *2 | ルビの表示位置を指定 | ||
| グリッド | layout-grid *2 | グリッドに関する指定をまとめて行う | |
| layout-grid-mode *2 | 行・文字グリッドの有効・無効を指定 | ||
| layout-grid-type *2 | グリッドのタイプを指定 | ||
| layout-grid-line *2 | 行グリッドの高さを指定 | ||
| layout-grid-char *2 | 文字グリッドの幅を指定 | ||
| 外部スクリプト | behavior *2 | 外部スクリプトを適用する | |
| 音声 | 省略 *1 | ||
*1 Internet Explorer および Netscape でサポートされていない。
*2 Internet Explorer の独自仕様。
*3 Netscape でサポートされているが、Internet Explorer ではサポートされていない。