ตัวอย่าง class และ id ในหน้า

HTML + CSS จับคู่กัน

<h1 id="site-title">ร้านกาแฟบ้านสวน</h1>
<p class="lead">เปิดทุกวัน 08:00–18:00</p>
<p>เมนูแนะนำวันนี้: ลาเต้เย็น</p>
#site-title {
  color: #5c3d2e;
  font-size: 2rem;
}

.lead {
  font-size: 1.125rem;
  color: #444;
}

p {
  color: #333;
}

ผลลัพธ์ที่คาดหวัง

หัวข้อใช้สีจาก id · ย่อหน้า lead ใหญ่กว่า · ย่อหน้าทั่วไปใช้สีจาก p

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

สร้าง class ชื่อ note แล้วใส่กับย่อหน้าหนึ่งอัน ให้สีต่างจาก p ทั่วไป
ใน CSS ใช้ .note { ... } และใน HTML ใส่ class="note"
ง่าย