定義方法の基本

セレクタ { 属性: 値 }

セレクタ {
属性: 値
}

ブラウザで表示した時の見え方

文字の背景に色をつけてみましょう。

ソースサンプル

【CSS】

.back {
background-color: #ffccee
}

【HTML】

<span class="back">文字の背景に色をつけてみましょう。</span>

[ 黒※説明中のタグ紫※省略可能なタグ赤※変更可能緑※文章など ]

複数の属性をまとめる定義方法

セレクタ { 属性a: 値a; 属性b: 値b }

一つのセレクタに、複数の属性を定義することができます。
属性は「;」で区切ります。
属性が複数になると見にくくなるため、改行したり半角スペースを入れて記述されることがあります。（人それぞれです）しかし、セレクタ・属性・値の途中で改行を入れると正しく解釈されません。改行をする場合はその点に注意してください。

ブラウザで表示した時の見え方

文字と背景を自由な色で彩ります。

ソースサンプル

【CSS】

.moji {
background-color: #ccffcc;
color: #009999
}

【HTML】

<span class="moji">文字と背景を自由な色で彩ります。</span>

セレクタのグループ化

セレクタ,セレクタ { 属性: 値 }

ブラウザで表示した時の見え方

見出し１

見出し２

ソースサンプル

【CSS】

h1,h2 {
background-color: #ccffcc;
color: #009999
}

【HTML】