HTML文書にスタイルシートを適用する方法には,次の3つの方法があり，これらを用途によって使い分けます．
それぞれの方法の具体的な記述の仕方は次のようにします.
スタイルを記述したスタイルシートファイル（拡張子「.css」）を別に用意し，それを各HTML文書に読み込ませることによってスタイルを設定します. この方法は,各ページに共通のスタイルを指定（ホームページ全体に統一感が生まれます）することができ,スタイルを変更したい場合もスタイルファイルを書き換えるだけなので簡単です．したがって，この方法を用いることが推められています．
まず，スタイルシートの書式に従って，使用したいスタイルの設定をまとめて記述したスタイルファイル（拡張子は .css）を作成します． その後，次の何れかの方法でHTMLファイルに読み込ませます．
| h1 {color:#ff0000;} | （「h1]の文字色を「#ff0000」に指定） |
| h2 {color:#ff8800;background-color:#ffff00;} | （「h2]の文字色を「#ff8800」に， 背景色を「#ffff00」に指定） |
| p {color:#ff00ff;background-color:#00ff00;} | （「p]の文字色「#ff00ff」に， 背景色を「#00ff00」に指定） |
スタイルファイルを「basic.css」と言うファイル名で保存したとすると，HTML ファイルのヘッダー部分の何処かに次のように書きます．
<head> …
<link rel="stylesheet" href="basic.css" type="text/css">
… </head>
スタイルファイルを「basic.css」と言うファイル名で保存したとすると，HTML ファイルのヘッダー部分に「style要素」を記述し，その中に次のように書きます．
<head> … <style>
@import "basic.css"
</style> … </head>
例えば，link要素の場合，HTMLファイルは以下のようになります．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>linking stylesheet</title>
<link rel="stylesheet" href="basic.css" type="text/css">
</head>
<body>
<hr>
<h1>外部ファイルによるスタイルの指定</h1>
<hr>
<h2>スタイルファイルを読み込む</h2>
<p>
全てのページを同じスタイルにには<br>
別ファイルにスタイルの設定をまとめてして<br>
HTMLファイルに読み込みます
</p>
<hr>
</body>
</html>
このファイルを実際に見てみると， 例 の様になります．
スタイルシートファイルを作成し，HTMLの練習で作成した全てのページに統一したスタイルを設定してみる．（link要素を用いる方が安定しているようです．）
「ファイル」メニューの「新規ファイル」で新しいファイルを作成し，右下の「プレーンテキスト」をクリックして，表示された窓から「CSS」を選ぶと，スタイルシートファイルとして認識されます．保存する時は，前述のように「（ファイル名）.css」として保存します．
コンテンツ全体の背景や余白，見出しにスタイルシートをを設定する．各項目を設定したら，毎回いったん保存して，ページがどのように見えるか確認してみる．（スタイルシートが反映されていないときは，再読み込みしてみる．）
例示してあるスタイルの設定値（色，間隔など）は適当な指定なので,各自値は変更すること．
body{
background-color:#5588aa; （背景色の設定）
}
h1{
color:#ff0000; （文字色）
background-color:#00ccff;
text-align:center; （中央揃え）
font-size:32pt; （文字の大きさ）
padding:20px; （境界と文字の間隔）
border:#00ffff 10px ridge; （境界線；色 太さ 形状）
}
h2{
width:180px; （横幅）
color:#faf088;
text-align:center;
border:#ffff00 3px outset;
}
h3{
width: 40px;
color: #8888ff;
text-align: right;
border: #0000ff 3px solid;
border-left: #ffcc00 30px groove; （左境界線；色 太さ 形状）
padding: 3px;
}
記述してある文章のブロック「section要素」，「article要素」，「nav要素」などの大きさ，余白，背景などを設定する．
さらに，各ブロックの場所を指定し，ホームページにレイアウトを設定する．
ここでは，領域の位置を指定する「position属性」とそれに関係するスタイルシートを使用して，レイアウトを設定する．
section{
width:75%; （領域の幅）
border: #333333 5px ridge;
padding: 10px;
position: relative; （位置の設定：元々の表示位置から相対的に指定）
top: 50px; （上からの位置指定）
left: 20%; （左からの位置指定）
}
article{
width: 85%;
background-color: #aacccc;
margin: 5px 5%;
padding: 5px 15px;
}
nav#renshu1{
color: #ffff00;
background-color: #ff33ff;
text-align: center;
border: #0000ff 5px inset;
padding: 5px;
}
nav#renshu2{
width: 15%;
color: #ffffff;
border: #ddddff 5px inset;
position: absolute; （位置の設定：ブラウザの窓に対する位置を指定）
top: 260px;
left: 3%;
}
必要ならば，以下のような残り２つの設定方法を用いてCSSを設定してみる．
スタイルを設定したいＨＴＭＬファイルのヘッダー部分（<head>と</head>の間）に<style>要素を用いて記述します．この方法は,設定したページでだけ使用するスタイルを記述する場合に使用します.
以下のようにヘッダー部分に <style> と </style> を作り，その間にスタイルを記述します．
<head> …
<style>
h3 {color:#00ffff}
p {background-color:#ffff00}
</style>
… </head>
このように記述したものをブラウザで見てみると，例 の様になります．
スタイルを設定したいHTML要素に直接「style」属性を使って記述します.この方法は,限定された場所に,一時的に使用するスタイルを設定する場合などに用います.
style 属性の使用法は，通常の HTML における属性の設定の仕方と同様です．指定するスタイルの記述内容は前説までに説明した書き方と変わりません．具体的には次のようにして設定します．
<h2 style="color:#ffff00;background-color:#0088ff;border-style:solid;border-color:#ff0000;">スタイルシートの記述方法</h2>
このように書くと，以下のように表示されます．