Mission 1: Colors

เป้าหมายของ Mission นี้: เข้าใจว่า CSS แยกไฟล์ทำงานยังไง และใส่สีข้อความ ด้วย property color

CSS แยกไฟล์ทำงานยังไง

HTML บอกแค่ "มีอะไรอยู่ตรงไหน" ส่วน CSS บอกว่า "หน้าตาเป็นยังไง" — เราเชื่อม สองไฟล์เข้าด้วยกันผ่าน class: ใส่ class="ชื่อ" ใน HTML แล้วไปเขียนกฎ ใน CSS ด้วย selector ที่ขึ้นต้นด้วยจุด .ชื่อ { ... }

Syntax ของ CSS

.product-title {
  color: #2563eb;
}

อ่านว่า "element ที่มี class product-title ให้ตั้งค่า color (สีตัวอักษร) เป็น #2563eb" — ทุกกฎ CSS มีรูปแบบ property: value; เสมอ ปิดท้ายด้วย เซมิโคลอน

Demo

<h2 class="product-title">เก้าอี้ไม้โอ๊ค</h2>

.product-title {
  color: #2563eb;
}

คำศัพท์สำคัญ (Vocabulary)