Fundamentals
How to Write CSS (Inline / Internal / External)
เรียนรู้ว่า CSS สามารถเขียนได้ 3 วิธีหลัก — Inline, Internal, และ External — แต่ละวิธีมีตำแหน่ง ขอบเขต และสถานการณ์ที่เหมาะสมต่างกัน
วิธีเขียน CSS มี 3 แบบ
ก่อนเริ่มเขียน CSS คุณต้องรู้ก่อนว่า — CSS สามารถเขียนได้ในหลายที่ ไม่ใช่แค่ที่เดียว Browser รองรับการรับ CSS จาก 3 แหล่งหลัก ซึ่งแต่ละแหล่งมีวิธีเขียน ตำแหน่ง และขอบเขตการทำงานที่ต่างกันชัดเจน การเข้าใจความแตกต่างนี้ตั้งแต่ต้น จะช่วยให้คุณตัดสินใจได้ว่าควรวาง style ไว้ที่ไหนในแต่ละสถานการณ์
- Inline Style — เขียน style โดยตรงบน HTML element ด้วย attribute style="..."
- Internal CSS — เขียน CSS ไว้ใน tag <style> ภายใน <head> ของหน้า HTML
- External CSS — แยก CSS ออกเป็นไฟล์ .css และเชื่อมด้วย <link> ใน <head>
ทำไมต้องรู้เรื่องนี้
หัวข้อนี้เป็นพื้นฐานที่ขาดไม่ได้ก่อนเริ่มเขียนเว็บจริง เพราะก่อนที่คุณจะเขียน CSS ได้ คุณต้องรู้ก่อนว่า "ควรเขียนมันไว้ที่ไหน" ถ้าไม่รู้เรื่องนี้ คุณอาจเจอปัญหาเหล่านี้: - เขียน style ซ้ำซ้อนในหลายที่ แก้ทีละจุดไม่ครบ - ไม่เข้าใจว่าทำไม style ไม่ทำงานตามที่คาดหวัง - โค้ด HTML รกเพราะยัด style เข้าไปใน element โดยตรงทั้งหมด - โปรเจกต์ขยายใหญ่ขึ้นแล้วดูแลรักษายาก การรู้ว่าแต่ละวิธีใช้เมื่อไหร่ ช่วยให้คุณเขียนโค้ดได้อย่างมีระเบียบ แก้ไขง่าย และทำงานร่วมกับคนอื่นได้ดีขึ้นตั้งแต่เริ่มต้น
ตัวอย่างจากชีวิตจริง
ลองนึกภาพว่าคุณกำลังจัดการเรื่องเสื้อผ้าในองค์กร — มี 3 วิธีในการกำหนดกฎการแต่งตัว: 🔴 Inline = "เขียนโน้ตแปะลงบนเสื้อตัวนั้นโดยตรง" เช่น แปะสติกเกอร์บนเสื้อตัวหนึ่งว่า "เสื้อตัวนี้ใส่ได้วันจันทร์เท่านั้น" — กฎนี้ใช้ได้กับเสื้อตัวนั้นตัวเดียว ไม่กระทบตัวอื่น แก้ง่ายแต่ถ้ามีเสื้อ 100 ตัวก็ต้องแปะ 100 ใบ 🟡 Internal = "มีกฎการแต่งตัวติดไว้หน้าห้องนั้น" เช่น ติดกฎไว้หน้าห้องประชุมว่า "ในห้องนี้ต้องแต่งกายสุภาพ" — กฎใช้ได้กับทุกคนในห้องนั้น แต่ห้องอื่นไม่รู้ด้วย 🟢 External = "มีคู่มือกฎการแต่งตัวส่วนกลาง" เช่น มีหนังสือกฎการแต่งตัวขององค์กร ที่ทุกห้องทุกชั้นอ้างอิงเล่มเดียวกัน — แก้กฎแค่ครั้งเดียวในเล่มนั้น ทุกที่เปลี่ยนพร้อมกัน นั่นคือหลักการเดียวกับ CSS ทั้ง 3 แบบ — ต่างกันที่ "ขอบเขตการใช้งาน"
ภาพรวม: เปรียบเทียบ 3 วิธี
Inline (แดง) = element เดียว · Internal (เหลือง) = ทั้งหน้า · External (เขียว) = ทั้งเว็บไซต์
ดูภาพด้านบนเพื่อเห็นตำแหน่งและขอบเขตของแต่ละวิธีในแผนภาพเดียว จากนั้นอ่านตารางเปรียบเทียบด้านล่าง
| วิธี | ตำแหน่งโค้ด | ขอบเขต | เหมาะกับ |
|---|---|---|---|
| Inline Style | attribute style="" | element เดียว | ทดลอง / แก้เฉพาะจุด |
| Internal CSS | <style> ใน <head> | ทั้งหน้า HTML | หน้าเดียว / prototype |
| External CSS | ไฟล์ .css แยก + <link> | ทั้งเว็บไซต์ | โปรเจกต์จริง / หลายหน้า |
Browser โหลด CSS อย่างไร
Browser อ่าน CSS จากทุกแหล่งพร้อมกัน → รวมเป็น CSSOM → คำนวณ style สุดท้าย → แสดงผล
เมื่อ Browser เปิดหน้าเว็บ มันจะรวบรวม CSS จากทุกแหล่งที่มีแล้วนำไปใช้พร้อมกัน ดูภาพด้านบนเพื่อเห็น flow ทั้งหมด จากนั้นอ่านขั้นตอนด้านล่าง
- 1. Browser อ่าน HTML ไฟล์ตั้งแต่บนลงล่าง
- 2. พบ attribute style="..." ใน element → บันทึก Inline Style ของ element นั้น
- 3. พบ <style> tag ใน <head> → อ่านและบันทึก CSS ทั้งหมดภายใน
- 4. พบ <link rel="stylesheet" href="styles.css"> → โหลดไฟล์ .css จาก URL นั้นเพิ่มเติม
- 5. รวม CSS ทั้งหมดเข้าด้วยกัน คำนวณ Specificity และ Cascade จากนั้นสร้าง CSSOM พร้อมแสดงผล
วิธีที่ 1: Inline Style
Inline Style คือการเขียน CSS โดยตรงใน attribute style ของ HTML element วิธีนี้ทำงานแบบ "บอกตรงๆ" ว่า element ตัวนั้นมีหน้าตาอย่างไร ไม่ต้องมี selector เพราะ style จะถูกใช้กับ element นั้นทันที ⚠️ สังเกต: ค่า CSS หลายตัวคั่นด้วย ; (semicolon) ภายใน attribute เดียว — ลองแก้ค่าสีหรือขนาดแล้วดูผลทางขวาได้เลย
วิธีที่ 2: Internal CSS (<style>)
Internal CSS คือการเขียน CSS ไว้ใน tag <style> ภายใน <head> ของหน้า HTML ข้อดีหลักเหนือ Inline คือสามารถใช้ CSS selector ได้ — เขียนกฎครั้งเดียวแต่ใช้กับหลาย element ในหน้าเดียวกันพร้อมกัน ⚠️ สังเกต: syntax ของ CSS ภายใน <style> ต้องมี selector { property: value; } เสมอ — ลองเพิ่มปุ่มที่สามดูว่ามันรับ style อัตโนมัติไหม
วิธีที่ 3: External CSS
External CSS คือการแยก CSS ออกเป็นไฟล์ .css ต่างหาก แล้วเชื่อมเข้ากับ HTML ด้วย <link> tag ใน playground นี้ tab "HTML" แทนไฟล์ index.html และ tab "CSS" แทนไฟล์ styles.css — ลองดูว่า HTML ดูสะอาดแค่ไหนเมื่อไม่มี CSS ปะปน ⚠️ สังเกต: ในงานจริง <link> ใน HTML ชี้ไปที่ไฟล์ .css — แก้ CSS tab แล้วดูผลทางขวาได้เลย
ไวยากรณ์ของ <link>: วิธีเชื่อม CSS กับ HTML จริง
ในโปรเจกต์จริง External CSS จะไม่ทำงานถ้าไม่มีแท็ก <link> ใน HTML — นี่คือสิ่งที่นักพัฒนาเว็บมือใหม่มักลืมมากที่สุด แท็ก <link> ต้องอยู่ภายใน <head> เสมอ และมี 2 attribute ที่จำเป็น: - rel="stylesheet" — บอก browser ว่าไฟล์นี้คือ CSS stylesheet - href="..." — ระบุ path ของไฟล์ .css ที่ต้องการโหลด
<link> ต้องอยู่ใน <head> — rel และ href ขาดไม่ได้ ถ้าลืมอันใดอันหนึ่ง browser จะไม่โหลด CSS
Path ของไฟล์ CSS: ระบุตำแหน่งให้ถูกต้อง
href ใน <link> คือ path ที่ชี้ไปหาไฟล์ .css — ถ้า path ผิด browser จะหา CSS ไม่เจอ และหน้าจะไม่มี style เลย Path มี 2 แบบหลัก:
ถ้า CSS ไม่ทำงาน ให้เช็ก path ก่อนเป็นอย่างแรก — เปิด DevTools > Network tab แล้วดูว่าไฟล์ .css โหลดได้หรือ 404
คู่มือตัดสินใจ: ควรใช้วิธีไหน?
เมื่อต้องเลือกว่าจะวาง CSS ไว้ที่ไหน ให้ถามตัวเองตามลำดับนี้:
ตัวอย่าง: JavaScript + Class Toggle เชื่อมกับ External CSS
ในงานจริง JavaScript มักทำงานร่วมกับ External CSS โดยการเพิ่มหรือลบ class ให้กับ element แทนที่จะเปลี่ยน style โดยตรง วิธีนี้เป็น best practice เพราะ: - CSS ยังอยู่ในไฟล์ .css ตามปกติ (แยกหน้าที่ชัดเจน) - JavaScript แค่บอกว่า element นี้อยู่ใน "สถานะ" ไหน - ง่ายต่อการแก้ไข animation หรือสีในอนาคต ลองกดปุ่มในหน้า preview ทางขวาดู — แล้วลองแก้สีหรือ transition ใน tab CSS
ข้อดีและข้อจำกัดของแต่ละวิธี
| วิธี | ข้อดี | ข้อจำกัด |
|---|---|---|
| Inline Style | เร็ว, ไม่ต้องมีไฟล์เพิ่ม, priority สูงสุด | นำกลับมาใช้ซ้ำไม่ได้, HTML รก, override ยาก, ไม่รองรับ pseudo-class เช่น :hover |
| Internal CSS | ใช้ selector ได้, ไม่ต้องมีไฟล์แยก, เหมาะกับหน้าเดียว | ใช้ข้ามหน้าไม่ได้, ทำให้ HTML ไฟล์ใหญ่ขึ้น, browser cache ไม่ได้ |
| External CSS | ใช้ซ้ำได้ทุกหน้า, browser cache ได้, แยกหน้าที่ชัดเจน, ดูแลรักษาง่าย | ต้องมีไฟล์แยก, ต้องเชื่อม <link> ทุกหน้า, ถ้า path ผิดจะไม่โหลด |
กรณีที่เหมาะสำหรับแต่ละวิธี
- 🔴 Inline Style — ใช้เมื่อต้องการทดสอบ style เร็วๆ, แก้ style เฉพาะ element เดียวชั่วคราว, หรือสร้าง HTML email (email clients รองรับแค่ inline style)
- 🟡 Internal CSS — ใช้เมื่อสร้าง prototype หรือ demo หน้าเดียว, สร้าง standalone HTML file ที่ไม่ต้องการไฟล์แยก, หรือเพิ่ม style เฉพาะที่ override ไฟล์ external
- 🟢 External CSS — ใช้ในโปรเจกต์จริงเสมอ ไม่ว่าจะมีกี่หน้า, เมื่อต้องการให้ทีมทำงานร่วมกัน, หรือเมื่อต้องการ performance ที่ดี (browser caching)
กรณีที่ไม่เหมาะ
- ❌ Inline Style — ไม่เหมาะกับโปรเจกต์จริง, component ที่ใช้ซ้ำ, หรือ style ที่ต้องการ :hover / :focus / ::before / ::after (pseudo-class และ pseudo-element ใช้กับ inline ไม่ได้)
- ❌ Internal CSS — ไม่เหมาะกับเว็บที่มีหลายหน้า เพราะต้องก็อป style ไปวางในทุกหน้า และถ้าอยากแก้ต้องแก้ทีละไฟล์
- ❌ External CSS — ไม่เหมาะสำหรับ HTML email เพราะ email client หลายตัวไม่รองรับ external CSS, หรือในกรณีที่ต้องการ HTML file แบบ self-contained จริงๆ
- ❌ ทุกวิธี — ไม่ควรผสมใช้แบบสะเปะสะปะโดยไม่มีเหตุผล เพราะทำให้ debug ยากมาก โดยเฉพาะเมื่อ style ขัดแย้งกัน
ข้อผิดพลาดที่มือใหม่มักพบ
- ❌ ใช้ Inline Style ทั้งหมด — ดูเหมือนสะดวกตอนเริ่มต้น แต่พอมีหลาย element โค้ดจะรกมาก แก้ไขยาก และ style ซ้ำซ้อน ทำให้ maintain ไม่ได้
- ❌ ลืมเชื่อม External CSS — เขียน styles.css แล้วแต่ลืมใส่ <link> ใน HTML ทำให้หน้าไม่มี style เลย และงงว่าทำไม CSS ไม่ทำงาน
- ❌ Path ของ <link> ผิด — เช่น ไฟล์อยู่ที่ css/styles.css แต่เขียน href="styles.css" ทำให้ browser หา CSS ไม่เจอ
- ❌ เขียน selector ไม่ตรงกับ element — เช่น มี class .btn ใน HTML แต่เขียน selector เป็น button ใน CSS ทำให้ style ไม่ถูกนำไปใช้
- ❌ ผสม 3 วิธีแบบไม่มีแบบแผน — ใช้ทั้ง Inline, Internal, External ปะปนกันโดยไม่รู้ว่าอันไหน override อันไหน ทำให้ debug ยากมาก
เปรียบเทียบแบบตาราง (ฉบับเต็ม)
| วิธี | ตำแหน่ง | นำกลับมาใช้ซ้ำ | Browser Cache | แนะนำใช้เมื่อ |
|---|---|---|---|---|
| Inline Style | attribute style="" | ไม่ได้ (element เดียว) | ไม่ได้ | ทดสอบ / แก้เฉพาะจุด / email |
| Internal CSS | <style> ใน <head> | ได้ภายในหน้าเดียว | ไม่ได้ | prototype / demo / หน้าเดียว |
| External CSS | ไฟล์ .css + <link> | ได้ทุกหน้า | ได้ (เร็วกว่า) | โปรเจกต์จริง / production |
Best Practice ในงานจริง
ในโปรเจกต์จริงและการทำงานระดับมืออาชีพ มีแนวทางที่นิยมปฏิบัติกันดังนี้:
- ใช้ External CSS เป็นหลักเสมอ — วาง CSS ทั้งหมดในไฟล์ .css แยกต่างหาก แยก HTML ออกจาก CSS ให้ชัดเจน
- หลีกเลี่ยง Inline Style ในโค้ดจริง — ยกเว้น email template, dynamic style ที่คำนวณด้วย JavaScript, หรือ style ที่ต้อง override เป็นกรณีพิเศษ
- Internal CSS ใช้ได้สำหรับ style ที่เฉพาะเจาะจงมากๆ กับหน้านั้น — เช่น critical CSS สำหรับ above-the-fold content เพื่อ performance
- JavaScript ควร toggle class ไม่ใช่แก้ style โดยตรง — ใช้ classList.add/remove/toggle แทน element.style.color เพื่อให้ CSS อยู่ในไฟล์ CSS เสมอ
สรุป
- CSS เขียนได้ 3 วิธี: Inline (attribute style), Internal (<style> ใน <head>), External (ไฟล์ .css แยก + <link>)
- Inline ใช้กับ element เดียว · Internal ใช้กับทั้งหน้า · External ใช้กับทั้งเว็บไซต์
- Browser รวม CSS จากทุกแหล่งเข้าด้วยกัน แล้วคำนวณ style สุดท้ายด้วย Specificity และ Cascade
- External CSS เป็น best practice สำหรับโปรเจกต์จริง — แก้ที่เดียว ทุกหน้าเปลี่ยน, browser cache ได้, ดูแลรักษาง่าย
- หลีกเลี่ยง Inline Style ในโค้ด production ยกเว้นมีเหตุผลชัดเจน เช่น email template หรือ dynamic style จาก JavaScript
แบบฝึกหัดท้ายบท
ลงมือทำจริงใน playground แต่ละข้อด้านล่าง — แต่ละข้อฝึกทักษะที่แตกต่างกัน อย่าดูเฉลยก่อนลองทำเองก่อน
ข้อ 1 — จำแนก CSS วิธีและข้อเสีย
โจทย์: ดูโค้ด HTML ใน tab ด้านล่าง — บอกได้ไหมว่าใช้ CSS วิธีใด? สังเกตว่ามีปัญหาอะไร ถ้าต้องการเปลี่ยนสีของทุก <p> ให้เป็นสีน้ำเงินแทน — ต้องแก้กี่จุด?
ข้อ 2 — เว็บ 20 หน้า ควรใช้วิธีใด
โจทย์: เว็บไซต์มี 20 หน้า ทุกหน้าต้องการสีหลัก สีพื้นหลัง และฟอนต์เดียวกัน CSS tab จำลอง "styles.css" ที่ใช้ร่วมกันทั้งเว็บ — ลองเขียน CSS ให้สมบูรณ์ แล้วดูผลใน Preview
ข้อ 3 — ย้าย Inline Style → Internal CSS
โจทย์: HTML ด้านล่างใช้ Inline Style ทั้งหมด — ให้ย้าย style ทั้งหมดออกจาก HTML ไปไว้ใน CSS tab แทน เป้าหมาย: HTML ต้องสะอาด (ไม่มี style="..." เหลือ) และ Preview ต้องหน้าตาเหมือนเดิมทุกอย่าง
ข้อ 4 — Debug: CSS ไม่ทำงาน
โจทย์: เพื่อนเขียน CSS ไว้แล้ว แต่ style บางส่วนไม่ขึ้นในหน้าเว็บ ดู HTML และ CSS แล้วหาว่าปัญหาอยู่ที่ไหน — แก้ให้ style ทำงานถูกต้องทั้งหมด (Hint: มีปัญหา 3 จุดในไฟล์นี้)
ข้อ 5 — Lab: เพิ่ม <link> ใน HTML เพื่อเชื่อม CSS
โจทย์: HTML ด้านล่างยังไม่มีแท็ก <link> — เพิ่ม <link rel="stylesheet" href="styles.css"> ใน <head> ให้ถูกต้อง CSS สำหรับหน้านี้เตรียมไว้ใน CSS tab แล้ว (จำลองเป็น styles.css) — เมื่อเพิ่ม <link> ถูกต้อง Run Checks จะผ่าน