スタイルシートをHTML文書で適用するには、次の方法があります。（３）、（２）、（１）の番号は、スタイルシートが適用される優先順位です。よりタグに近い場所のスタイルシートが優先されます。（「!important」をつけると最優先になります）

外部ファイルで呼び出す（３）

HTML文書の<head>～</head>の間に、<link>タグを書いて呼び出します。

HTML tag

<link rel="stylesheet" href="***.css" type="text/css">

***の部分にスタイルシートファイルのファイル名（URL）を書きます。スタイルシートファイルの拡張子はcssです。

文字の色をピンクに変えてみます。まず、メモ帳などに以下の文章を書きます。

CSS source

p {
  color: #ff00ff;
}

<p>～</p>に挟まれた文字をピンク色に変えるという意味です。書いたら、適当なファイル名を付け拡張子をcssにして保存します。ここではpink.cssとします。

次に、同じくメモ帳などに下の文章を書き、pink.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
   <link rel="stylesheet" href="pink.css" type="text/css">
  </head>
  <body>
    <p>ピンク色に変わります。</p>
  </body>
</html>

pink.cssをHTMLファイルと同じディレクトリに置いたならば、***のところはpinkのみになります。もしも、一つ上の階層に置いたら、../pinkとなります。リンクを貼る時の要領と同じです。

HTML文書内にまとめて指定（２）

HTML文書の<head>～</head>の間に、<style>タグで指定します。（３）と同じく文字をピンク色にします。

（３）と同じくメモ帳などに下の文章を書き、pink2.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
   <style type="text/css">
   <!--
   p {
   color: #ff00ff;
   }
   -->
   </style>
  </head>
  <body>
    <p>ピンク色に変わります。</p>
  </body>
</html>

HTML文書イメージ
pink2.html（HTMLファイル）

は、スタイルシートに対応していない古いブラウザ用です。コメントアウトしてソースが表示されるのを防ぎます。

display (inline frame)

pink2.htmlをダブルクリックしてブラウザで見るとこんな感じになります。

style属性でタグに直接指定（１）

HTML文書の<p>タグに、style属性で指定します。上記と同じく文字をピンク色にします。

メモ帳などに下の文章を書き、pink3.htmlで保存します。

HTML source

<html>
  <head>
   <title></title>
  </head>
  <body>
    <p style="color: #ff00ff;">ピンク色に変わります。</p>
  </body>
</html>

HTML文書イメージ
pink3.html（HTMLファイル）

display (inline frame)

pink3.htmlをダブルクリックしてブラウザで見るとこんな感じになります。

★「!important」をつけると最優先

「!important」というキーワードをつけるとその値は最優先となります。

HTML source

<html>
  <head>
   <title></title>
   <style type="text/css">
   <!--
   p {
   color: blue !important;
   }
   -->
   </style>
  </head>
  <body>
    <p style="color: pink;">ピンク色になりません。</p>
  </body>
</html>

display (inline frame)

ブラウザで見ると文字がblueになっています。