【初心者向け】class属性とid属性のそれぞれの特徴と使い分け方【CSS】

<p>文字色を赤！</p>
<p>文字色を青！</p>
<p>文字色を緑！</p>

p{
 color: red;
}
/*p要素の文字色を赤に*/

<要素名 class="クラス名">

.クラス名{
 プロパティ: 値;
}

<p class="red">文字色を赤！</p>
<p>文字色を青！</p>
<p>文字色を黄色！</p>

.red{
 color: red;
}
/* redクラスの文字色を赤に */

<要素名 id="値">

#値{
 プロパティ: 値;
}

<p>文字色を赤！</p>
<p id="blue">文字色を青！</p>
<p>文字色を黄色！</p>

#blue{
 color: blue;
}
/* idがblueの文字色を青に */

<p class="color width background">おはよう</p>

.color{
  color:pink;
}
/* colorクラスの文字色をピンクに */

.width{
  width:150px
}
/* widthクラスの幅を150pxに */

.background{
  background-color: navy;
}
/* backgroundクラスの背景色をnavyに */

#color{
  color: pink;
}
/* id="color"の文字色をピンクに */

#width{
  width:150px
}
/* id="width"の幅を150pxに */

#background{
  background-color: navy;
}
/* id="background"の背景色をnavyに */

<p class="color width" id="background">おはよう</p>

.color{
  color: pink;
}
/* colorクラスの文字色をピンクに */

.width{
  width:150px
}
/* id="width"の幅を150pxに */

#background{
  background-color: navy;
}
/* id="background"の背景色をnavyに */

<p class="color">おはよう</p>
<p class="color">こんにちは</p>
<p>こんばんわ</p>

.color{
  color: pink;
}
/ *colorクラスの文字色をピンクに */

<p id="color">おはよう</p>
<p id="color">こんにちは</p>
<p>こんばんわ</p>

#color{
  color: red;
}
/*id="color"の文字色を赤に*/

<p id="color" class="color">おはよう</p>

#color{
color: red;
}
/* id="color"の文字色を赤に */

.color{
  color: pink;
}
/* colorクラスの文字色をピンクに */

<p class="red;">文字色を赤！</p>
<p class="blue;">文字色を青！</p>
<p class="green;">文字色を緑！</p>

.red{
color: red;
}
/* redクラスの文字色を赤に */

.blue{
color: blue;
}
/* blueクラスの文字色を青に */

.green{
color: green;
}
/* greenクラスの文字色を緑に */