CSS — ชั้นการออกแบบ

ถ้า HTML คือโครงกระดูกของหน้าเว็บ CSS คือผิวหนัง สีสัน และตัวเลือกตัวอักษรที่สวมทับอยู่ CSS ควบคุมทุกคุณสมบัติที่มองเห็นได้ — สี ฟอนต์ ขนาด ระยะห่าง และ layout หากไม่มี CSS หน้าเว็บก็จะเป็นแค่ตัวหนังสือสีดำบนพื้นขาว แต่เมื่อมี CSS หน้าเว็บก็กลายเป็นประสบการณ์ที่ออกแบบมาอย่างดี

ลองนึกภาพแบบนี้: HTML คือโครงสร้าง Frame ใน Figma — ชั้น (layer) ที่เรียงซ้อนกัน ส่วน CSS คือ fills, strokes, font styles และ spacing rules ที่คุณนำมาใส่ในชั้นเหล่านั้น โครงสร้างและสไตล์อยู่แยกกันโดยตั้งใจ หมายความว่าคุณสามารถออกแบบหน้าตาใหม่ได้โดยไม่ต้องแตะเนื้อหา หรือนำสไตล์เดียวกันไปใช้ในหลายร้อยหน้าจากไฟล์เดียว

CSS ย่อมาจาก Cascading Style Sheets คำว่า “Cascading” หมายถึงสไตล์สามารถมาจากหลายแหล่งและมีกฎที่ชัดเจนว่าอันไหนจะมีผล — เราจะเรียนเรื่องนั้นในภายหลัง ตอนนี้ให้คิดว่า stylesheet คือไฟล์สเปกการออกแบบ: รายการกฎที่บอกว่า “element นี้ควรมีหน้าตาแบบนี้”

สิ่งที่คุณจะเรียนในโมดูลนี้

บทเรียน	หัวข้อ
1	Selectors — เลือก element ที่ต้องการ
2	Colors & Units — ค่าที่เข้าใจได้
3	Typography — ฟอนต์ ขนาด line height
4	Box Model — ระยะห่างและขนาด
5	Backgrounds & Borders — การออกแบบพื้นผิว

โครงสร้างของ CSS rule

ทุก CSS rule มีรูปแบบเดียวกัน:

selector { property: value; }

Selector — ระบุว่าจะจัด style ให้ element ไหน h1 เลือก <h1> ทุกอัน .card เลือกทุก element ที่มี class="card"
Property — คุณสมบัติภาพที่จะเปลี่ยน เช่น color, font-size, padding, background-color
Value — ค่าที่จะตั้ง เช่น #7C3AED, 1.5rem, 2px solid black

ตัวอย่างจริง:

h1 {
  color: #7C3AED;
  font-size: 2rem;
}

อ่านออกเสียงว่า: “ทุก h1 heading: ตั้งสีตัวอักษรเป็นสีม่วง และขนาดฟอนต์เป็น 2rem” นี่คือวิธีที่นักออกแบบจะเขียน text style spec นั่นเอง

สามวิธีในการเพิ่ม CSS

Inline — <h1 style="color: purple;"> — ใช้ได้ แต่ดูแลรักษายาก เหมือนการ hardcode ค่าแทนที่จะใช้ design token หลีกเลี่ยง
<style> tag — CSS เขียนใน <head> ของ HTML file เหมาะสำหรับการทดลองขนาดเล็ก
External .css file — ไฟล์แยกต่างหากที่ link ด้วย <link rel="stylesheet" href="styles.css"> ใน <head> นี่คือวิธีมาตรฐานสำหรับโปรเจกต์จริง — ไฟล์เดียว ใช้ได้หลายหน้า

ในคอร์สนี้ LivePreview ด้านล่างจัดการทุกอย่างให้คุณ คุณเขียน CSS ในแผงขวาและ browser จะอัปเดตทันที

Card สไตล์แรกของคุณ

HTML ด้านล่างคือ card เรียบง่าย — ตายตัว ไม่ต้องแก้ไข CSS ทางขวาคือของคุณ ลองเปลี่ยน background-color, color, หรือค่า font-size แล้วดู card อัปเดตสดๆ

<div class="card">
  <h2>Visual Design</h2>
  <p>CSS gives you control over every pixel — just like Figma, but in the browser.</p>
</div>