How to Write CSS (inline / internal / external)

เว็บข่าว 20 หน้าต้องการหัวข้อสีน้ำเงินเหมือนกัน — ถ้า "เขียน style ปนกับ HTML" ไว้ทุกหน้า การเปลี่ยนเป็นสีเขียวคือการไล่เปิด 20 ไฟล์แก้ทีละจุด และถ้า style ซ้ำอยู่บนทุก <p> ก็ต้องแก้เป็นสิบจุดต่อหน้า ทางออกคือการรู้จัก "ช่องทาง" ที่ CSS เข้าไปถึง HTML ได้ บทนี้จะพาคุณแยกแยะวิธีเขียน CSS 3 แบบหลัก — inline, internal และ external — ว่าอยู่ที่ไหน ใช้กับขอบเขตไหน และเบราว์เซอร์รวมทุกแบบเข้าด้วยกันอย่างไร

• เปลี่ยนสีหลักทั้งเว็บ แต่ไม่รู้จะแก้ที่ไหนจุดเดียวให้ครบทุกหน้า
• style ที่เขียนบน element ตัวหนึ่ง ใช้กับ element อื่นไม่ได้ ต้องก็อปซ้ำ
• เปิดโค้ด HTML แล้วแยกไม่ออกว่าส่วนไหนคือเนื้อหา ส่วนไหนคือหน้าตา

วิธีเขียน CSS 3 แบบคือ "ที่อยู่" ของ CSS ที่ต่างกัน 3 แห่ง: บนตัว element ในหน้า HTML นั้น หรือในไฟล์ .css แยก — ยิ่งอยู่ "ไกล" จาก element เท่าไร ขอบเขตยิ่งกว้างเท่านั้น: - **Inline Style:** เขียนใน attribute style="" ของ element นั้น — มีผลกับ element ตัวเดียว - **Internal CSS:** เขียนในแท็ก <style> ใน <head> ของหน้า HTML — มีผลทั้งหน้า - **External CSS:** เขียนในไฟล์ .css แยก แล้วเชื่อมด้วยแท็ก <link> — มีผลกับทุกหน้าที่ลิงก์ไฟล์เดียวกัน

ทั้ง 3 แบบเขียนด้วย rule รูปแบบเดียวกัน — selector { property: value; } ต่างกันแค่ "ตำแหน่ง" ที่วาง rule (หมายเหตุ: ในตัวอย่างและแบบฝึกหัดจะมี property เช่น line-height, background และ border-radius เพื่อให้เห็นผลลัพธ์ชัดเจน ซึ่งแต่ละตัวจะเรียนเต็มในบทต่อ ๆ ไป — บทนี้โฟกัสที่ช่องทางการเขียน CSS ทั้ง 3 แบบ): **แบบที่ 1 — Inline:** ใส่ declaration ลงใน attribute style="" โดยไม่ต้องมี selector เพราะตัว element คือเป้าหมายอยู่แล้ว:

**แบบที่ 2 — Internal:** ย้าย rule ไปรวมไว้ในแท็ก <style> ใน <head> ของหน้า — selector กลับมาใช้งานได้ และ rule หนึ่งข้อใช้กับ element ทั้งหน้า:

**แบบที่ 3 — External:** แยก CSS ไปเป็นไฟล์ .css ของตัวเอง แล้วเชื่อมด้วยแท็ก <link> ใน <head>:

ใน playground ของบทเรียนนี้ แท็บ "CSS" ทำหน้าที่เป็นไฟล์ styles.css ส่วนแท็บ "HTML" คือไฟล์ HTML ที่ลิงก์ไฟล์นั้นอยู่แล้ว

เมื่อเบราว์เซอร์เปิดหน้าเว็บ มันไม่ได้เลือก "วิธีใดวิธีหนึ่ง" — มันรวบรวม CSS จากทั้ง 3 แหล่งที่เจอในหน้านั้น แล้วรวมเข้า CSSOM ชุดเดียว: 1. อ่าน HTML ตั้งแต่บนลงล่าง 2. เจอ attribute style="" → เก็บ declaration ของ element นั้น 3. เจอแท็ก <style> → เก็บ rule ทั้งหมดในนั้น 4. เจอแท็ก <link rel="stylesheet"> → โหลดไฟล์ .css และเก็บ rule ทั้งหมด 5. รวมทุกแหล่งเป็น CSSOM แล้วคำนวณค่าที่ element แต่ละตัวจะแสดงจริง

เมื่อ rule จากหลายแหล่งกำหนด property ตัวเดียวกัน เบราว์เซอร์มีกฎ "ใครชนะ" ที่แน่นอน — กลไกการตัดสินนั้นคือ cascade และ specificity ซึ่งจะเรียนในบท 'Specificity' หลังจากรู้จัก selector แล้ว ที่ต้องจำจากบทนี้คือ: CSS จากทุกแหล่ง "อยู่ร่วมกัน" ใน CSSOM การเลือกวิธีเขียนจึงไม่ใช่เรื่อง syntax แต่เป็นเรื่องขอบเขตและการดูแลรักษา

**ทายก่อนดูเฉลย:** ปุ่มสองปุ่มนี้ต้องหน้าตาเหมือนกัน ฝั่งซ้ายเขียน style ซ้ำบนปุ่มแต่ละตัว ฝั่งขวาใช้ rule เดียวในไฟล์ styles.css — ถ้าทีมดีไซน์เปลี่ยนสีปุ่มเป็นสีเขียว ฝั่งไหนต้องแก้กี่จุด?

• โปรเจกต์จริงที่มีหลายหน้า → ใช้ External CSS เป็นค่าเริ่มต้น — แก้ที่เดียว ใช้ซ้ำทุกหน้า และเบราว์เซอร์เก็บ cache ไฟล์ .css ได้
• หน้าเดียวที่แชร์เป็นไฟล์ลอย ๆ หรือ prototype → Internal CSS พอ — ไม่ต้องมีไฟล์เพิ่ม
• Inline ใช้เฉพาะจุดที่จำเป็นจริง ๆ เช่น HTML email หรือการทดสอบ — เพราะแก้ทีละ element และใช้ซ้ำไม่ได้

หน้าเว็บข่าวนี้แยก CSS ไปไว้ในแท็บ CSS แล้ว (เหมือนไฟล์ styles.css ที่ HTML ลิงก์ไว้) — ในแท็บ CSS มีสเปกของทีมดีไซน์เขียนไว้ให้ ให้ทำตามรูปแบบ rule ในหัวข้อไวยากรณ์: เลือก element ที่ต้องการ แล้วประกาศ property ตามสเปก

หน้าโปรไฟล์นี้ใช้ Internal CSS — สไตล์ทั้งหมดอยู่ในแท็ก <style> ในไฟล์เดียวกัน แต่ rule ที่มีอยู่ยังผิด 2 จุด: หัวข้อถูกตั้งสีเทาจางจนอ่านยากทั้งที่ควรเป็นสีเข้ม และย่อหน้ายังไม่ได้กำหนดระยะบรรทัด ให้แก้ภายใน <style> เท่านั้น

อีเมลต้อนรับสมาชิกต้องแสดงผลใน email client ซึ่งหลายตัวตัด <style> และไฟล์ CSS ภายนอกทิ้ง — เหลือแค่ inline style ที่เขียนใน attribute style="" เท่านั้น งานนี้เป็นงานเดียวที่ inline จำเป็นจริง ๆ ให้ใส่ style ให้ element ตามสเปกในคอมเมนต์ โดยไม่แก้โครงสร้าง HTML

ตอบคำถามสั้น ๆ เพื่อเช็กว่าคุณแยกแยะวิธีเขียน CSS ทั้ง 3 แบบ และรู้ว่าควรเลือกแบบไหนตามขอบเขตที่ต้องการ

• วิธีเขียน 3 แบบต่างกันที่ตำแหน่งและขอบเขต: inline = element เดียว · internal = หน้าเดียว · external = ทุกหน้าที่ลิงก์
• ทั้ง 3 แบบเขียนด้วย rule รูปแบบเดียวกัน และเบราว์เซอร์รวมทุกแหล่งเข้า CSSOM ชุดเดียว
• External CSS เป็นค่าเริ่มต้นของโปรเจกต์จริง — แก้ที่เดียวทั้งเว็บ ใช้ร่วมกันได้ และ cache ได้
• ก้าวต่อไป: ในบทถัดไป 'Selector basics (element, class, id)' เราจะเรียนการเลือกเป้าหมายของ rule — element, class และ id — เพื่อให้ style ไปโดน element ที่ต้องการ (สมมติฐานความรู้ก่อนหน้า: เขียน rule ในทั้ง 3 แหล่งได้จากบทนี้ เพราะ selector ใช้ได้เหมือนกันไม่ว่า CSS จะอยู่ที่ไหน)