ลองดูโค้ดในตัวอย่างแรกกันเลยครับ (สามารถทดลองนำโค้ดไปทดสอบบนบราวเซอร์จริงๆได้นะครับ โดยคัดลอกโค้ดไปวางบน Notepad แล้วบันทึกเป็นไฟล์ แล้วทดสอบบนเว็บบราวเซอร์ดู)

<style>
p {
   color: red;
}
</style>
<p>ข้อความในย่อหน้าที่ 1</p>
<p>ข้อความในย่อหน้าที่ 2</p>

การเขียนแบบนี้จะทำให้ทั้งสองย่อหน้าแสดงผลเป็นตัวอักษรสีแดง ทั้งหมด (รวมถึงแท็ก <p> อื่นๆในหน้าเพจด้วยจะมีสีแดง) แต่ถ้าเราต้องการ กำหนดให้บางแท็กเท่านั้นมีสีแดง เราสามารถเขียนใหม่ได้ดังนี้

<style>
.red {
   color: red;
}
</style>
<p class=red>ข้อความในย่อหน้าที่ 1</p>
<p>ข้อความในย่อหน้าที่ 2</p>

วิธีนี้จะมีผลให้เฉพาะย่อหน้าแรกเท่านั้นที่จะแสดงผลเป็นสีแดง เนื่องจากเรามีการกำหนด class (อ่านว่า คลาส) ให้กับแท็ก p ตัวแรกเท่านั้น และมีการกำหนดคลาสให้กับ CSS เป็น .red(จุดใน CSS หมายถึงคลาส)
 

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

ในการใช้คลาสมีจุดเด่นตรงที่ เราสามารถใช้คลาสเดียวกันกำหนดให้กับแท็กอื่นๆได้ด้วยเพื่อให้มันแสดงผลออกมาเหมือนๆกันเช่น

<p class=red>ข้อความในย่อหน้าที่ 1</p>
<p>ข้อความในย่อหน้าที่ 2 และในแท็กนี้มี<span class=red>สีแดง</span></p>

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

<style>
.red {
   color: red;
}
.bold {
   font-weight: bold;
}
</style>
<p class=red>ข้อความในย่อหน้าที่ 1</p>
ข้อความในย่อหน้าที่ 2 และในแท็กนี้มี<span class="red bold">สีแดงและเป็นตัวหนา</span></p>

ผลลัพท์ก็จะได้เป็นว่าภายในแท็ก span ข้อความก็จะแสดงเป็นทั้งตัวหนาและมีสีแดง

ข้อสังเกตุ เมื่อเราต้องการกำหนคลาสให้กับแท็กมากกว่า 1 ตัว จะเห็นว่าเราต้องใส่เครื่องหมายคำพูด ("") ครอบชื่อคลาสทั้งสองไว้ด้วย เนื่องจากเราจะต้องใส่ชื่อคลาสทั้งสอง โดยมีช่องว่างคั่นแต่ละคลาส 1 ช่อง และในทางทฤษฎีเราสามารถใส่ หรือไม่ใส่เครื่องหมายคำพูดครอบค่าของคลาสหรือไม่ก็ได้ หากค่าของคลาสมีเพียงค่าเดียว เช่น class="red"