How to insert CSS into HTML
ในการสร้างหน้าเว็บเพจขึ้นมาซักหนึ่งหน้า หากว่าเราสร้างด้วยโค้ด HTML ธรรมดาๆ เราก็จะได้หน้าเพจที่แสนจะธรรมดาๆ เพื่อทำให้หน้าเพจของเราดึงดูดและมีความน่าสนใจมากขึ้นเราจึงต้องใช้ CSS เข้าช่วย
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้เป็นในการจัดรูปแบบการแสดงผลเอกสาร HTML
วันนี้ก็จะมาแนะนำวิธีในการเพิ่ม CSS ซึ่งมีหลากหลายแบบ เราควรเลือกใช้ให้เหมาะสมตามวิธีการใช้งาน มาดูวิธีต่างๆที่นำมาเสนอในบทความนี้กันเลย
External style
วิธีนี้จะสามารถเปลี่ยนสไตล์ของทั้งเว็บไซต์ได้เพียงแค่เปลี่ยนแปลงที่ไฟล์นี้ สามารถเขียนใน text editor ใดก็ได้ ในไฟล์ไม่ควรจะมี html tag และจะต้องบันทึกไฟล์เป็นนามสกุล .css เช่น “customstyle.css”
วิธีการนำไปใช้ในหน้าเพจคือ ใส่ element <link> ในส่วน <head> ของไฟล์ html หรือหน้าเพจที่จะนำ CSS นี้ไปใช้
<head>
<link rel="stylesheet" type="text/css" href="customstyle.css">
</head>ข้อดี
— ถ้ามีการเปลี่ยนแปลง CSS จะนำสไตล์ไปปรับใช้กับทุกๆหน้าเพจ ไม่ได้เฉพาะเจาะจงในแต่ละจุดหรือหน้าเพจใดหน้าเพจหนึ่ง
— การเปลี่ยนธีมของเว็บไซต์จะทำได้ง่ายขึ้น
— ความเร็วในการโหลดหลายๆเพจพร้อมกันจะเพิ่มขึ้นเพราะ browser จะโหลดใหม่เฉพาะ html แต่ CSS จะถูกแคชไว้จึงทำให้ไม่จำเป็นต้องโหลดซ้ำ
ข้อเสีย
— จำเป็นต้องมีการร้องขอ HTTP เพิ่มเติมสำหรับแต่ละไฟล์ CSS ที่ถูกลิงก์ซึ่งสามารถทำให้หน้าเพจ render ล่าช้าได้
Internal Style
วิธีนี้จะสามารถเปลี่ยนสไตล์ได้ภายในหน้าเพจหน้าเดียวเท่านั้น หน้าเพจอื่นๆจะไม่มีผล ในวิธีนี้จะเขียน CSS ไว้ใน element <style> ที่อยู่ภายในส่วน <head> ของหน้าเพจ html
<head>
<style>
body {
background-color: #F5F5F5;
}p {
color: #660000;
margin-left: 10px;
}
</style>
</head>
ข้อดี
— ใช้เวลาในการโหลดเร็วขึ้น
— ใช้งานได้ดีกับสไตล์แบบไดนามิก
ข้อเสีย
— สไตล์จะต้องถูกดาวน์โหลดใหม่ในทุกๆครั้งที่มีการเรียกใช้แต่ละเพจ
Inline Style
วิธีนี้ใช้ในการใส่ style ใน element เดียว โดยการใส่ attribute style ที่ element ที่ต้องการ
<h1 style="color:red;margin-left:10px;">This is a heading</h1>ข้อดี
— Inline style จะเขียนทับ CSS อื่นเพราะถือความสำคัญกว่า CSS ภายนอก
— โหลดเพจได้เร็ว
— สามารถแก้ไขสไตล์ได้โดยไม่ต้องแก้ในไฟล์ CSS หลัก
— ใช้งานได้ดีสำหรับสไตล์แบบไดนามิก
— เป็นประโยชน์สำหรับ HTML emails (การใส่สไตล์ให้หรือจัดรูปแบบให้อีเมล)
ข้อเสีย
— การเข้าถึงสไตล์สามารถทำให้เกิดการสิ้นเปลืองทรัพยากรมากเกินความจำเป็น
— การบำรุงรักษาทำได้ยากและอาจทำให้น่าเบื่อเพราะต้องตามแก้ในทุกๆจุดที่มีการใส่สไตล์
Import Style
วิธีนี้เป็นเหมือนกับการแนบเพิ่มไฟล์ CSS เข้าภายในตัวมันเอง
<style>
@import "customstyle.css";
@import url("customstyle.css");
</style>ข้อดี
— สามารถเพิ่มไฟล์ CSS ได้โดยที่ไม่ต้องเปลี่ยนหรือเพิ่ม HTML
ข้อเสีย
— จำเป็นต้องมีการร้องขอ HTTP เพิ่มเติมสำหรับแต่ละไฟล์ CSS ที่ถูกลิงก์ซึ่งสามารถทำให้หน้าเพจ render ล่าช้าได้
การใส่ CSS ในแต่ละแบบมีข้อดีและข้อเสียแตกต่างกันไป เราเป็นผู้ใช้งานก็ควรเลือกใช้ให้เหมาะสมกับงาน จะได้จัดการและใช้งานได้ง่ายๆ เจอกันบทความหน้านะจ๊ะ :)
อ้างอิงและอ่านเพิ่มเติม
https://matthewjamestaylor.com/add-css-to-html
https://www.w3schools.com/css/css_howto.asp
https://www.quackit.com/css/tutorial/implementing_css.cfm
