初心者のためのホームページ作成動画解説付

cssを外部ファイルに記述

外部ファイルを読み込む

このスタイルシートの書き方を覚えましょう。
htmlファイルとcssファイルが分かれているため管理が非常にしやすく、ソースも見やすいです(^^)
cssを外部ファイルに記述する場合は、htmlファイルとcssファイルの2つを用意する必要があります。
htmlファイル (sample.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>初心者のためのホームページ講座</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h5>上記の  の部分にcssファイルと同じファイル名を記述します。</h5>
<h6>初心者のためのホームページ講座</h6>
</body>
</html>
外部ファイルでcssを設定する場合はhtmlファイルのhead内に
<link rel="stylesheet" href="style.css" type="text/css"> (  の部分はcssファイルと同じ名前を記述します。)
という1行を追加します。
この記述でstyle.cssファイルを読み込め!と命令しているわけです。
cssファイル (style.css)
h5 {
font-size:100%;
color:#fff;
background-color:#aaf;
padding:5px;
border:10px double #fff;
}

h6 {
font-size:100%;
color:#fff;
background-color:#faa;
padding:5px;
border:10px double #fff;
}
上記2つのファイルを同じ階層に置き、htmlファイルを開くと下記のようになります。
上記の  の部分にcssファイルと同じファイル名を記述します
初心者のためのホームページ講座


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
cssファイルの書き方について
p {font-size:150%;color:#fff;background-color:#33a;padding:10px;border:10px double #fff;}
と上記のように横にドンドン追加していってもいいのですが・・・
p {
font-size:150%;
color:#fff;
background-color:#33a;
padding:10px;
border:10px double #fff;
}
このように改行して書いた方が見やすいのでこちらをおすすめします(^^)
(この2つの内容は全く同じです。横につなげて書くか、縦に一つずつ書くかの違いです。)
また、cssファイルは1個だけという決まりはないので、head内に
<link rel="stylesheet" href="sample1.css" type="text/css">
<link rel="stylesheet" href="sample2.css" type="text/css">
のように、cssファイルを2つ書いても問題ありません。
全体に反映させるcssと個別のページに反映させるcssに分けても良いかもしれません(^^)