スタイルシートをタグから抜き出す
スタイルシートをタグから抜き出す

.
表示 1 
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 1
</span>
表示 1 表示 2 表示 3 表示 4 表示 5 
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 1
</span>
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 2
</span>
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 3
</span>
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 4
</span>
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 5
</span>
スタイルシートに同じ記述がある場合 
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 1
</span>
抜き出す
color:green;border:green solid 1px;padding:2px;
タグを指定する
span {color:green;border:green solid 1px;padding:2px;}
下記の間に記述
<style type="text/css"><!--

--></style>
↓
<style type="text/css"><!--
span{color:green;border:green solid 1px;padding:2px;}
--></style>
<head></head> の間に記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>タイトル</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="製作者の名前">
<meta name="generator" content="textediter">
<style type="text/css"><!--
span{color:green;border:green solid 1px;padding:2px;}
--></style>
</head>
<body>
.
.
.
<span>表示 1</span>
<span>表示 2</span>
<span>表示 3</span>
<span>表示 4</span>
<span>表示 5</span>
.
.
.
表示 1 表示 2 表示 3 表示 4 表示 5
別のタグに適用したい場合 
<span style="color:green;border:green solid 1px;padding:2px;">
	表示 1
</span>
抜き出す
color:green;border:green solid 1px;padding:2px;
任意の名前を付ける 1
.waku{color:green;border:green solid 1px;padding:2px;}
<font class="waku">
呼び出す時どのタグからも呼び出せる
下記の間に記述
<style type="text/css"><!--

--></style>
↓
<style type="text/css"><!--
.waku{color:green;border:green solid 1px;padding:2px;}
--></style>
<head></head> の間に記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>タイトル</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="製作者の名前">
<meta name="generator" content="textediter">
<style type="text/css"><!--
.waku{color:green;border:green solid 1px;padding:2px;}
--></style>
</head>
<body>
.
.
.
<span class="waku">表示 1</span>
<font class="waku">表示 2</font>
<br><br>
<div class="waku">表示 3</div>
.
.
.
表示 1 表示 2

表示 3
任意の名前を付ける 2
#waku{color:green;border:green solid 1px;padding:2px;}
<font id="waku">
呼び出す時どのタグからも呼び出せる
下記の間に記述
<style type="text/css"><!--

--></style>
↓
<style type="text/css"><!--
#waku{color:green;border:green solid 1px;padding:2px;}
--></style>
<head></head> の間に記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>タイトル</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="製作者の名前">
<meta name="generator" content="textediter">
<style type="text/css"><!--
#waku{color:green;border:green solid 1px;padding:2px;}
--></style>
</head>
<body>
.
.
.
<span id="waku">表示 1</span>
<font id="waku">表示 2</font>
<br><br>
<div id="waku">表示 3</div>
.
.
.
表示 1 表示 2

表示 3
外部ファイルに書き出す場合 ***.css
*** の部分は任意 
span   {color:green;border:green solid 1px;padding:2px;}
#waku01{color:blue;border:blue outset 1px;padding:2px;}
.waku02{color:red;border:red inset 1px;padding:2px;}
このまま書き出せばよい
拡張子は .css にて保存する


背景画像の相対アドレス
***.css からのアドレスになります
一部古いバージョンのブラウザで例外もあります
読み込むファイルの <head></head>の間にブルー部分を記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>タイトル</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="製作者の名前">
<meta name="generator" content="textediter">
<link rel="stylesheet" href="スタイルシート.css" type="text/css">
</head>
<body>
.
.
.
スタイルシートのコメント
/* この中にコメントを記述する */ 
<style type="text/css"><!--
span{color:green;border:green solid 1px;padding:2px;}
/*  span タグは 緑、直線 太さ 1px の枠を付ける  */
--></style>
スタイルシートの優先順位 
最初に
外部スタイルシート ***.css を読み込む

次に
<head></head>間のスタイルシートを読み込む

最後に
タグに埋め込まれたスタイルシートを読み込む
後に読み込まれたものが影響を及ぼします