1. 外部スタイルシートのリンク（外部参照）

最も推奨される一般的な手法は、CSSを独立した拡張子「.css」のファイルとして保存し、HTMLの<head>セクション内で読み込む方法です。この方法では、構造（HTML）とデザイン（CSS）を完全に分離できます。

<link rel="stylesheet" type="text/css" href="assets/css/main-style.css" media="all">

href属性にはCSSファイルへのパスを記述します。同一ディレクトリであればファイル名のみ、サブフォルダ内であればフォルダ名/ファイル名のように指定します。media属性は、スタイルを適用するデバイス（screen、printなど）を定義します。

この手法の主な利点は、1つのCSSファイルを修正するだけでサイト全体のデザインを統一して変更できるメンテナンス性の高さにあります。また、ブラウザがCSSファイルをキャッシュするため、2ページ目以降の読み込み速度が向上し、パフォーマンス面でも非常に有利です。

2. 内部スタイルシート（埋め込みスタイル）

HTMLドキュメントの<head>タグ内に<style>タグを記述し、その中にCSSルールを直接書き込む方法です。特定のページだけに適用したい独自のスタイルがある場合に有効です。

<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <style>
        .content-wrapper {
            padding: 20px;
            background-color: #f5f5f5;
        }
        .text-highlight {
            color: #d9534f;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="content-wrapper">
        <p class="text-highlight">ここにスタイルが適用されます。</p>
    </div>
</body>

この方法は、メールマガジンのHTML作成や、CMSのテンプレートなどで動的にスタイルを出力する必要がある場合に重宝されます。ただし、ページごとにCSSを記述するとコードが重複し、管理が複雑になるデメリットがあります。

3. インラインスタイル（行内記述）

HTML要素のstyle属性を使用して、特定のタグに直接CSSを適用する方法です。特定の要素に対してのみ、ピンポイントでスタイルを上書きしたい場合に使用されます。

<section style="margin-top: 50px; border-bottom: 2px solid #ccc;">
    <h2 style="color: navy;">セクションタイトル</h2>
</section>

インラインスタイルは最も優先順位が高いため、外部CSSの設定を強制的に変更したい場合に便利です。しかし、デザインと構造が混在し、HTMLファイルが肥大化するため、通常の大規模開発では避けるべき手法とされています。CSSの編集権限がない環境での一時的な対応などに限定して利用するのが一般的です。

4. CSS内での@importによる読み込み

あるCSSファイルの中から、別のCSSファイルを読み込む手法です。CSSファイルを機能ごとに分割（リセットCSS、レイアウトCSS、カラー設定など）し、1つのメインファイルに統合して管理する際に利用されます。

/* 共通設定用 CSS (common.css) 内で記述 */
@import url("reset.css");
@import url("theme/colors.css");

body {
    font-family: sans-serif;
}

この方法の利点は、HTML側の修正なしにCSS側だけで依存関係を制御できることです。例えば、数百ページあるサイトに新しいスタイル定義を追加したい場合、既存の共通CSSファイルに@importを1行追加するだけで、全ページに反映させることができます。パスの指定は、その記述を行っているCSSファイルからの相対パスとなります。