บทที่ 7 แนะนำการเขียน CSS เบื้องต้น ตอน คลาส
<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"