ホームページにデザインを与えるには，CSS（カスケーディング・スタイル・シート）という方法で，ホームページを記述している HTML要素 に対して様々な設定をすることによって行われます．
スタイルシートの基本的な書き方は，次のようにします．
| セレクター | スタイルを適用する対象：HTML要素など |
|---|---|
| プロパティ | スタイルを指定する項目：文字色，背景，領域など，詳しくはスタイルシートの詳細． |
| 値 | プロパティに設定する値：色名，画像，数値など，詳しくはスタイルシートの詳細． |
この様にHTMLにおいて「セレクター」の「プロパティ」によって分類される項目に「値」を設定するという方法でデザインを指定します．
設定できるデザインの「プロパティ」と「値」についてはスタイルシートの詳細を見ること．
スタイルを指定する対象となるセレクターとして，様々なものが定義されています．これらを状況によって使い分けることで，ホームページに色々なデザインを設定できるようになります．
| 対象 | セレクターの書式 |
|---|---|
| ひとつの要素に設定するとき： | 要素｛プロパティ：値；プロパティ：値；…｝ |
| 複数の要素に設定するとき： | 要素１,要素２,… ｛プロパティ：値；プロパティ：値；…｝ |
| 全ての要素に設定するとき： | *｛プロパティ：値；プロパティ：値；…｝ |
| 特定のHTML属性を持つ要素だけに設定： | 要素 [HTML属性]｛プロパティ：値；プロパティ：値；…｝ |
| 特定のHTML属性と値を持つ要素だけに設定： | 要素 [HTML属性 = 値]｛プロパティ：値；プロパティ：値；…｝ |
| HTML属性に設定された値の中に一致するものがある場合に設定： | 要素 [HTML属性 ~= 値]｛プロパティ：値 値 値 値；…｝ |
| HTML属性に「（文字列）− 」で始まる値が設定されているときに設定： | 要素 [HTML属性 |= （文字列）]｛プロパティ：値：プロパティ：値；…｝ |
| HTML属性に「（文字列）」で始まる値が設定されているときに設定： | 要素 [HTML属性 ^= （文字列）]｛プロパティ：値；プロパティ：値；…｝ |
| HTML属性に「（文字列）」で終わる値が設定されているときに設定： | 要素 [HTML属性 $= （文字列）]｛プロパティ：値；プロパティ：値；…｝ |
| HTML属性に「（文字列）」を含む値が設定されているときに設定： | 要素 [HTML属性 *= （文字列）]｛プロパティ：値；プロパティ：値；…｝ |
| 要素の「class属性」に「クラス名」（任意の名前）が設定されている場合に設定： | 要素.クラス名｛プロパティ：値；プロパティ：値；…｝ |
| 要素の「id属性」に「id名」(１つのHTMLファイル内に１つだけ指定）が設定されている場合に設定： | 要素#id名｛プロパティ：値；プロパティ：値；…｝ |
| 親の要素に含まれる要素全て（子孫）に設定： | 親要素（半角スペース）要素｛プロパティ：値；プロパティ：値；…｝ |
| 親要素に直接含まれる要素だけ（子）に設定： | 親要素 > 要素｛プロパティ：値；プロパティ：値；…｝ |
| 指定要素の直後にある要素だけに設定： | 指定要素 + 要素｛プロパティ：値；プロパティ：値；…｝ |
| 指定要素の後にある（直後でなくても良い）要素に設定： | 指定要素 ~ 要素｛プロパティ：値；プロパティ：値；…｝ |
ここにあるセレクタ以外に,より詳細な設定ができるセレクタが用意されています.詳しくは他のセレクタを見て下さい.
デザインを与えたい要素に対する設定は，具体的には次のように書きます．
| 設定例 | 説明 |
|---|---|
| h1 {color:#00ff00;} | 「h1」の文字色「color」を「#00ff00」に指定 |
| h2,h3 {color:#ffff00;} | 「h2」と「h3」の文字色を「#ffff00」に指定 |
| table[border="0"] {color:#ff00ff;background-color:#00ff00;} | 「border="0"」を指定した「table」の文字色を「#ff00ff」に， 背景色「background-color」を「#00ff00」に指定 |
| table tr {background-color:#ddffff;text-align:center;} | 「table」に含まれる「tr」の背景色を「#ddffff」にし，文字揃え「text-align」を中央揃え「center」に指定 |
| p.alpha {margin:1cm;padding:10pt;} | 「class="alpha"」を設定した「p」のページの端からの距離「margin」を「1cm」，文の回りの空白「padding」を「10pt」に指定 |
| h2#alpha {margin:1cm;padding:10pt;} | 「id="alpha"」を設定した「h2」のページの端からの距離「margin」を「1cm」，文の回りの空白「padding」を「10pt」に指定 |
| body + h1 {background-image:url("photo.jpeg");padding:0.5cm;} | 「body」直後にある「h1」の背景画像「background-image」を「photo.jpeg」に，文の回りの空白を「0.5cm」に指定 |
スタイルで，数値を指定する時に，単位を付ける場合がある．この時使用できる単位は次のものです．
| 相対指定 | 絶対指定 | ||
|---|---|---|---|
| 単位 | 意味 | 単位 | 意味 |
| em | 要素のフォントサイズを1 | in | インチ（1in=2.54cm） |
| ex | 要素の小文字「x」の高さを1 | cm | センチメートル |
| px | ピクセル | mm | ミリメートル |
| rem | html要素のフォントサイズを1 | pt | ポイント（1pt=1/72 in） |
| vw | 表示領域の幅を100 | pc | パイカ（1pc=12pt） |
| vh | 表示領域の高さを100 | ||
| vm | 表示領域の幅か高さの小さい方を100 | ||
| ch | 要素の「0」の幅を1 | ||
| deg | 度（度数法） |
|---|---|
| grad | グラード（90度を100とする） |
| rad | ラジアン（弧度法：180度をπとする） |
| turn | 回転数 |
CSSで色を指定する方法には次のようなものがあります.
| RGB | #rrggbb | #の後に,赤(r),緑(g),青(b)をそれぞれ16進数(0~f)2桁で表す |
|---|---|---|
| #rgb | #の後に,赤(r),緑(g),青(b)をそれぞれ16進数1桁で表す | |
| rgb(n,n,n) | rgbの()の中に,0から255の10進数で赤,緑,青を順に指定 | |
| rgb(n%,n%,n%) | rgbの()の中に,パーセントで赤,緑,青を順に指定 | |
| RGBA | rgba(n,n,n,a) | rgbの()の中に,0から255の10進数で赤,緑,青を順に指定し,aに0.0〜1.0の範囲で透明度を指定（0.0が透明） |
| HSL | hsl(色相,彩度,輝度) | 色相（色を角度で表す：赤から緑,青）は0から360で,彩度（鮮やかさの度合）,輝度（明るさの度合）はパーセントで指定 |
| HSLA | hsl(色相,彩度,輝度,a) | 最後のaに透明度を指定 |
| 名前 | red, blue, …etc. | 色の名前を指定 |