การเขียน CSS โดยใช้ไอดี (id) ของ HTML ก็เหมือนๆกันกับการใช้คลาสในบทก่อนหน้านั่นแหละครับ สิ่งที่แตกต่างกันมีแค่เปลี่ยนมาใช้เครื่องหมาย # (อ่านว่า ชาร์ป) แทน . (จุด) ในคลาสนั่นเอง

#paragraph1 {
   font-size: 150%;
}

ความแตกต่างของการใช้คลาสหรือไอดีอยู่ที่ข้อกำหนดหรือกฎของ HTML ครับ

ไอดีของแท็กเปรียบเสมือนชื่อเรียกของแท็กนั้นๆครับ หรือถ้าจะให้อธิบายง่ายๆก็จะหมายความถึงชื่อของคนในบ้านของเรา(ซึ่งก็คือเว็บเพจ)นั่นเอง ในบ้านของเราก็จะมีคนอยู่หลายคนและแต่ละคนก็จะมีชื่อไม่ซ้ำกัน ลองนึกดูเอาละกันครับว่าถ้าบ้านเรามีนายเอสองคน เวลาเราเรียกนายเอจะรู้หรือไม่ว่าเราต้องการเรียกคนไหน ดังนั้นในหนึ่งเว็บเพจ(หนึ่งหน้า) เราก็จะมีไอดีนั้นๆกำหนดให้แท็กได้เพียงตัวเดียว

<p id=paragraph1>ย่อหน้านี้มีไอดีชื่อ paragraph1</p>
<p>ย่อหน้านี้เป็นย่อหน้าปกติ</p>

ดังนั้นโดยทั่วไปถ้าเรากำหนด CSS โดยใช้ไอดีก็จะหมายความว่ามันจะมีผลกับแท็กเพียงแท็กเดียวเท่านั้น

เราสามารถเลือกใช้ ไอดี หรือ คลาสก็ได้นะครับ รวมถึงสามารถใช้ทั้งสองอย่างร่วมกันก็ได้ ซึ่งโดยปกติแล้วเรามักจะใช้ไอดีกับแท็กที่เราต้องการกำหนดเพียงแท็กเดียวเท่านั้น

<style>
#paragraph1 {
   font-size: 150%;
}
.red {
   color: red;
}
</style>
<p id=paragraph1>ย่อหน้านี้มีไอดีชื่อ paragraph1</p>
<p>ย่อหน้านี้เป็นย่อหน้าปกติ</p>
<p id=paragraph1 class=red>ย่อหน้านี้มีไอดีชื่อ paragraph1 และมีสีแดง</p>