ถ้า HTML คือโครงสร้างบ้าน CSS ก็คือการตกแต่งให้บ้านสวยงาม CSS ทำให้เว็บมีสีสัน จัดวางองค์ประกอบ และแสดงผลได้สวยงามทุกหน้าจอ บทความนี้จะสอน CSS ตั้งแต่พื้นฐานจนถึงเทคนิคจัดเลย์เอาต์ระดับมืออาชีพ ═══════════════════════════════════════ 📌 1. CSS คืออะไร ═══════════════════════════════════════ CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้ "ตกแต่ง" หน้าเว็บ HTML — กำหนดสี ขนาด ตัวอักษร ระยะห่าง การจัดวาง และการแสดงผลบนอุปกรณ์ต่าง ๆ • HTML = โครงสร้าง/เนื้อหา • CSS = หน้าตา/การตกแต่ง คำว่า "Cascading" หมายถึงกฎจะไหลลงและซ้อนทับกันได้ (ตัวที่เจาะจงกว่าชนะ) ═══════════════════════════════════════ 🔧 2. วิธีใส่ CSS 3 แบบ ═══════════════════════════════════════ 1) Inline — ใส่ในแท็กโดยตรง (ใช้เท่าที่จำเป็น)
css 
<p style="color: red; font-size: 20px;">ข้อความสีแดง</p>
2) Internal — ใส่ใน <style> ภายใน <head>
css 
<head>
    <style>
        p { color: blue; }
    </style>
</head>
3) External — แยกไฟล์ .css (แนะนำที่สุด!)
css 
<head>
    <link rel="stylesheet" href="style.css">
</head>
แล้วในไฟล์ style.css เขียน:
css 
p { color: green; }
*** แบบ External ดีที่สุด: แยกโค้ดเป็นระเบียบ ใช้ซ้ำได้หลายหน้า *** ═══════════════════════════════════════ ✏️ 3. โครงสร้าง Syntax ของ CSS ═══════════════════════════════════════
css 
selector {
    property: value;
    property: value;
}
ตัวอย่าง:
css 
h1 {
    color: navy;
    font-size: 32px;
    text-align: center;
}
• selector (h1) → เลือกว่าจะจัดสไตล์อิลิเมนต์ไหน • property (color) → คุณสมบัติที่จะเปลี่ยน • value (navy) → ค่าที่กำหนด • ปิดท้ายแต่ละบรรทัดด้วย ; (semicolon) เสมอ ═══════════════════════════════════════ 🎯 4. Selector — การเลือกอิลิเมนต์ ═══════════════════════════════════════
css 
* { }                → เลือกทุกอิลิเมนต์
p { }                → เลือกตามชื่อแท็ก
.card { }            → เลือกตาม class (ใช้จุด .)
#header { }          → เลือกตาม id (ใช้ #)
div p { }            → p ที่อยู่ภายใน div (ลูกหลาน)
div > p { }          → p ที่เป็นลูกโดยตรงของ div
a:hover { }          → ตอนเอาเมาส์ชี้ (pseudo-class)
input:focus { }      → ตอนคลิกเข้าไปในช่อง
li:first-child { }   → ลูกตัวแรก
ตัวอย่างการใช้ class (ที่ใช้บ่อยที่สุด):
css 
HTML:  <div class="card">กล่อง</div>
CSS:   .card { background: #fff; padding: 20px; }
ลำดับความสำคัญ (Specificity): inline style > id (#) > class (.) > แท็ก ═══════════════════════════════════════ 🎨 5. สี หน่วย และค่าที่ใช้บ่อย ═══════════════════════════════════════ การกำหนดสี:
css 
color: red;                  → ชื่อสี
color: #ff5733;              → รหัส HEX
color: rgb(255, 87, 51);     → RGB
color: rgba(255, 87, 51, 0.5); → RGB + ความโปร่งใส
หน่วยขนาด:
css 
px   → พิกเซล (ค่าคงที่)
%    → เปอร์เซ็นต์เทียบพ่อแม่
em   → เทียบขนาดตัวอักษรพ่อแม่
rem  → เทียบขนาดตัวอักษรราก (html) — นิยมใช้
vw/vh → เทียบความกว้าง/สูงของหน้าจอ (100vw = เต็มจอ)
═══════════════════════════════════════ 🔤 6. ตัวอักษรและข้อความ (Text & Font) ═══════════════════════════════════════
css 
p {
    font-family: 'Kanit', sans-serif;  /* แบบอักษร */
    font-size: 16px;                    /* ขนาด */
    font-weight: bold;                  /* ความหนา (normal/bold/100-900) */
    color: #333;                        /* สี */
    text-align: center;                 /* จัดกึ่งกลาง (left/right/justify) */
    line-height: 1.6;                   /* ระยะห่างบรรทัด */
    text-decoration: underline;         /* ขีดเส้นใต้ */
    letter-spacing: 1px;                /* ระยะห่างตัวอักษร */
}
═══════════════════════════════════════ 📦 7. Box Model — หัวใจของ CSS ═══════════════════════════════════════ ทุกอิลิเมนต์คือ "กล่อง" ที่ประกอบด้วย 4 ชั้น (จากในออกนอก):
css 
┌─────────────────────────────┐
│         margin              │  ← ระยะห่างนอกกล่อง
│   ┌─────────────────────┐   │
│   │      border         │   │  ← เส้นขอบ
│   │   ┌─────────────┐   │   │
│   │   │   padding   │   │   │  ← ระยะห่างในกล่อง
│   │   │  ┌───────┐  │   │   │
│   │   │  │content│  │   │   │  ← เนื้อหา
│   │   │  └───────┘  │   │   │
│   │   └─────────────┘   │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

.box {
    width: 300px;
    padding: 20px;                    /* ระยะในทั้ง 4 ด้าน */
    border: 2px solid #333;           /* ขอบ */
    margin: 10px;                     /* ระยะนอกทั้ง 4 ด้าน */
    box-sizing: border-box;           /* ให้ width รวม padding+border */
}
*** เคล็ดลับ: ใส่ box-sizing: border-box; จะคำนวณขนาดง่ายขึ้นมาก *** กำหนดทีละด้านได้: margin-top, padding-left, border-bottom ฯลฯ ═══════════════════════════════════════ 🧩 8. Display และการจัดวาง ═══════════════════════════════════════
css 
display: block;        → กินเต็มแถว ขึ้นบรรทัดใหม่ (div, p)
display: inline;       → อยู่ในบรรทัด กินเท่าเนื้อหา (span, a)
display: inline-block; → อยู่ในบรรทัดแต่กำหนด width/height ได้
display: none;         → ซ่อน (ไม่กินพื้นที่)
display: flex;         → เลย์เอาต์แบบยืดหยุ่น (นิยมมาก)
display: grid;         → เลย์เอาต์แบบตาราง
═══════════════════════════════════════ 💪 9. Flexbox — จัดเลย์เอาต์แบบมือโปร ═══════════════════════════════════════ Flexbox ทำให้จัดของในแนวแถว/คอลัมน์ได้ง่ายมาก
css 
.container {
    display: flex;
    justify-content: center;   /* จัดแนวนอน: center/space-between/space-around */
    align-items: center;       /* จัดแนวตั้ง: center/flex-start/flex-end */
    gap: 16px;                 /* ระยะห่างระหว่างชิ้น */
    flex-wrap: wrap;           /* ให้ตกบรรทัดได้เมื่อพื้นที่ไม่พอ */
}

.item {
    flex: 1;                   /* ให้แต่ละชิ้นขยายเท่ากัน */
}
ตัวอย่างจัดของ 3 ชิ้นให้กระจายเท่ากัน:
css 
HTML: <div class="container"><div class="item">1</div>...</div>
→ ได้ 3 กล่องเรียงกันสวยงาม กึ่งกลางจอ
═══════════════════════════════════════ 🗂️ 10. Grid — จัดตารางหลายคอลัมน์ ═══════════════════════════════════════
css 
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 คอลัมน์เท่ากัน */
    gap: 20px;
}
• 1fr = 1 ส่วนของพื้นที่ที่เหลือ • repeat(3, 1fr) = สร้าง 3 คอลัมน์ กว้างเท่ากัน เหมาะกับการวางการ์ด แกลเลอรี หรือเลย์เอาต์ทั้งหน้า ═══════════════════════════════════════ 📍 11. Position — การกำหนดตำแหน่ง ═══════════════════════════════════════
css 
position: static;    → ค่าปกติ (ไหลตามลำดับ)
position: relative;  → เลื่อนจากตำแหน่งเดิม (ใช้ top/left)
position: absolute;  → วางอิสระเทียบพ่อแม่ที่ relative
position: fixed;     → ตรึงกับหน้าจอ (เมนูลอย)
position: sticky;    → เลื่อนตามจนถึงจุดแล้วหนึบไว้

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
}
═══════════════════════════════════════ 📱 12. Responsive & Media Queries ═══════════════════════════════════════ ทำให้เว็บแสดงผลดีทุกขนาดจอ ด้วย @media
css 
/* จอปกติ 3 คอลัมน์ */
.grid { grid-template-columns: repeat(3, 1fr); }

/* จอมือถือ (กว้างไม่เกิน 768px) เหลือ 1 คอลัมน์ */
@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
    .navbar { font-size: 14px; }
}
*** อย่าลืมใส่ใน HTML: <meta name="viewport" content="width=device-width, initial-scale=1.0"> *** ═══════════════════════════════════════ ✨ 13. Transition & Animation ═══════════════════════════════════════ Transition — เปลี่ยนค่าอย่างนุ่มนวล
css 
.btn {
    background: #3498db;
    transition: all 0.3s ease;
}
.btn:hover {
    background: #2980b9;
    transform: scale(1.05);   /* ขยาย 5% ตอนชี้ */
}
Animation — เคลื่อนไหวต่อเนื่อง
css 
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.box { animation: fadeIn 1s ease; }
═══════════════════════════════════════ 🎯 14. ตัวอย่างการ์ดสวย ๆ (ใช้ได้จริง) ═══════════════════════════════════════
css 
.card {
    width: 300px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-6px);
}
.card h3 {
    color: #1e293b;
    margin-bottom: 8px;
}
.card p {
    color: #64748b;
    line-height: 1.6;
}
═══════════════════════════════════════ ✅ 15. สรุปและเคล็ดลับมือโปร ═══════════════════════════════════════ • ใช้ External CSS แยกไฟล์ และตั้งชื่อ class ให้สื่อความหมาย • ใส่ box-sizing: border-box; ให้ทุกอิลิเมนต์ (ผ่าน * selector) • เรียนรู้ Flexbox และ Grid ให้ชำนาญ = จัดเลย์เอาต์อะไรก็ได้ • ออกแบบแบบ Mobile-First แล้วใช้ Media Query ขยายสู่จอใหญ่ • ใช้ rem สำหรับขนาดตัวอักษร และ CSS Variables เพื่อจัดการสีทั้งเว็บ
css 
:root {
    --primary: #3498db;
    --text: #333;
}
.btn { background: var(--primary); color: var(--text); }
จำไว้: CSS ต้องฝึกลงมือทำ ลองปรับค่าดูผลจริงในเบราว์เซอร์ เปิด DevTools (กด F12) เพื่อทดลองแก้ CSS สด ๆ ได้เลย 🎨