スタイルシート - 外部CSSに記述する方法サンプル２

黒色がソースファイル/赤色が書き出した文字

<head>
<title>スタイルシート - 外部CSSに記述する方法 サンプル２
<link rel="stylesheet" href="sample_css.css" type="text/css">

<style type="text/css">
<!--

body {
   background-color: #cceeff;
}

-->
</style>
</head>

外部CSSファイルの内容

body {
   background-color: #ffffff;
}

font {
   font-size: 20px;
   color: #ff0000;
}

.test_class {
   font-size: 30px;
   color: #ff0000;
}

#test_id {
   font-size: 40px;
   color: #ff0000;
}

外部CSSファイルの背景色より、優先順位が高い<head>内の背景色設定が優先されている

外部CSSでスタイル設定されてまーす

<font>
   外部CSSでスタイル設定されてまーす
</font>

優先順位が高い方がスタイル優先されまーす

<font style="font-size: 15px; color: #ff0000; font-weight: bold;">
   優先順位が高い方がスタイル優先されまーす
</font>

クラスで指定してまーす

<div class="test_class">
   クラスで指定してまーす
</div>

IDで指定してまーす

<div id="test_id">
   IDで指定してまーす
</div>