外部CSSと HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。
外部のcssがうまく反映されません。
そこで、head内に同じcssを入れたところ、きちんと反映されました。
どうして違いがでるのか教えてください。
『head内に入れた時』
<!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>
<style type="text/css">
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: normal;
background-position: center;
padding: 0px;
margin: 0px;
}
#page {
background-color: #009900;
height: 800px;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
#title {
background-color: #CCFF00;
height: 120px;
width: 700px;
position: relative;
left: 0px;
top: 0px;
margin-right: 15px;
margin-left: 15px;
padding-right: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<div id="page">
<div id="title">
</div>
</div>
</body>
</html>
『外部cssの時』
[styel.cssは]
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: normal;
background-position: center;
padding: 0px;
margin: 0px;
}
#page {
background-color: #009900;
height: 800px;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
#title {
background-color: #CCFF00;
height: 120px;
width: 700px;
position: relative;
left: 0px;
top: 0px;
margin-right: 15px;
margin-left: 15px;
padding-right: 15px;
padding-left: 15px;
}
[反映される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 href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="title">
</div>
</div>
</body>
</html>
です。
誰かお答えくださいませ。
補足
改行部分を修正してみましたが、変化はなかったです。