CSS class กับ id ต่างกันอย่างไร ควรใช้แบบไหน

CSS class กับ id ต่างกันอย่างไร ควรใช้แบบไหน คำตอบคือ ถ้า style ดังกล่าวถูกนำไปใช้กับหลาย Elements ให้ใช้ class แต่ถ้า style ดังกล่าวถูกนำไปใช้กับ Element เดียวให้ใช้ id โดยมีรายละเอียดดังนี้

ตัวอย่าง CSS class กับ id ต่างกันอย่างไร ควรใช้แบบไหน

<style>
    .box {
        width: 50px;
        height: 50px;
        background-color: green;
        margin-bottom: 5px;
    }    
    #box_blue {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 5px;
    }
</style>

<div id="box_blue"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

โค้ดด้านบนมี class ชื่อ box และ id ชื่อ box_blue โดย class จะถูกนำไปใช้กับหลายๆ elements จากตัวอย่างมีการนำไปใช้กับ div ทั้งหมด 3 อัน แต่ถ้า id ควรถูกนำไปใช้กับแค่ element เดียว