วิธีลิงก์ CSS กับ HTML เพื่อให้มาร์กอัพอ่านง่ายขึ้น

ในฐานะนักเขียนโค้ดใหม่ เราเริ่มเพิ่ม CSS ในหน้าเว็บเป็น inline-styling ใช้ style attribute ส่ง CSS เข้า element โดยตรง:

<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>

เมื่อไปสู่ไซต์ซับซ้อนขึ้น ใช้ Internal CSS เขียน CSS ทั้งหมดระหว่าง <style> tags ใน <head>:

<!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style> h1, h4 { text-align: center; } h1 { color: blue; } h4 { color: red; } </style> </head> <body> <h1>Star Wars</h1> <h4>Return of the Jedi</h4> </body> </html>

สิ่งนี้ทำให้ HTML สะอาดขึ้น แต่ถ้ามี CSS 500 บรรทัด ไฟล์จะอ่านยากเร็วๆ แต่เราสามารถสร้าง external stylesheets และลิงก์กับ HTML file ได้!

The Setup:

1. ในโฟลเดอร์โปรเจกต์หลัก ที่มี index.html สร้างไฟล์ใหม่ชื่อ index.css ไฟล์นี้จะเก็บ CSS ทั้งหมดสำหรับ index.html ชอบตั้งชื่อ CSS ตาม HTML ที่จัดสไตล์ เพื่อจัดระเบียบ แต่ตั้งชื่ออะไรก็ได้ถ้ารู้ว่า style ไฟล์ไหน
2. หากมี CSS ระหว่าง <style> tags ใน <head> ของ HTML ให้ cut และ paste โค้ด CSS เท่านั้น (ไม่รวม tags) ลงใน CSS file ที่สอดคล้อง
3. ใน <head> ของ HTML สร้าง <link> tag ชี้ไป CSS file:

       <link rel="stylesheet" type="text/css" href="./index.css">

Link ประกอบ 3 ส่วน:

1. The rel attribute: บอกว่ามีความสัมพันธ์ระหว่างไฟล์นี้และอีกไฟล์ Link บอกความสัมพันธ์นั้น
2. The type attribute: อธิบายประเภทความสัมพันธ์ของไฟล์ลิงก์กับ HTML
3. The href attribute: relative path ไปยังไฟล์จากตำแหน่ง HTML file – ตำแหน่งไฟล์

จำไว้ว่าแม้แยก CSS file จาก HTML แต่วัตถุคASCADE ของ CSS ยังคงเหนือกว่า หากมีหลาย CSS files ต้อง:

1. มี <link> ชี้แต่ละ CSS file

2. ให้ไฟล์เรียงลำดับถูกต้อง เพื่อ styling ถูกต้อง หากลำดับผิด styling อาจไม่ทำงาน

แค่นี้ก็พอ! คุณพร้อมสร้าง external stylesheets สำหรับโปรเจกต์แล้ว!