複数のタグで同一のスタイルシート(css)を指定する

ホームページやブログなどのウェブサイトで、何度も同一のスタイル(文字の大きさや色など)を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利です。

 .名前 { スタイル }

という形式になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、

<タグ名 class=" 名前 ">

というように、どのスタイルを適用するのか class="名前" で指定します。
使用例です。

<style type="text/css">
<!--
.test1 { color:red }
.test2 {
font-size:18px;
color:white;
background-color:#000080;

}

-->
</style>

というふうに指定をしておけば、何度でもこのスタイルを使用することができます。

 

<span class="test1">この文字は赤色</span>

<div class="test2">

この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。
</div>

このサンプルを表示させると、次のようになります。

この文字は赤色
この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。

通常のウェブサイトであれば、スタイルの記述は<head>~</head> に記述するのが一般的ですが、ブログの場合、そのまま記事の投稿欄に記載してしまっても平気です。
この場合、自動改行機能を有効にしたままですと<style>タグの改行で本文が改行されて間が開いてしまいますので、自動改行は無効にしておくことをおすすめします。