การใช้งาน CSS Inline, Internal และ External

การใช้งาน CSS Inline, Internal และ External

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ CSS Selector ซึ่งเป็นเครื่องมือที่ใช้ในการเลือก HTML Element เพื่อปรับแต่งสไตล์ ในบทนี้ เราจะมาเรียนรู้ถึงวิธีการนำ CSS ไปใช้งานจริง โดย CSS สามารถเขียนและใช้งานได้ 3 รูปแบบหลักๆ คือ Inline CSS, Internal CSS และ External CSS แต่ละรูปแบบมีข้อดีข้อเสียแตกต่างกันไป ซึ่งเราจะมาเจาะลึกในรายละเอียดกันครับ

Inline CSS

Inline CSS คือการเขียน CSS Style ลงไปโดยตรงใน HTML Element โดยใช้ Attribute ที่ชื่อว่า style วิธีนี้เป็นวิธีที่ง่ายและรวดเร็วที่สุดในการปรับแต่งสไตล์ให้กับ Element ใด Element หนึ่ง

ตัวอย่าง:

<p style="color: blue; font-size: 16px;">ข้อความนี้จะเป็นสีฟ้าและมีขนาด 16 พิกเซล</p>

ในตัวอย่างข้างต้น เราได้กำหนดให้ข้อความใน Paragraph Element เป็นสีฟ้า (color: blue;) และมีขนาด 16 พิกเซล (font-size: 16px;) โดยการใส่ Attribute style ลงไปใน <p> Tag

ข้อดีของ Inline CSS:

• ง่ายและรวดเร็ว: เหมาะสำหรับการทดลองหรือปรับแต่งสไตล์ให้กับ Element เพียงเล็กน้อย
• เฉพาะเจาะจง: สไตล์ที่กำหนดจะถูกนำไปใช้กับ Element นั้นๆ เท่านั้น

ข้อเสียของ Inline CSS:

• ไม่สามารถนำกลับมาใช้ใหม่ได้: หากต้องการใช้สไตล์เดียวกันกับ Element อื่นๆ จะต้องเขียนซ้ำ
• ยากต่อการบำรุงรักษา: หากมีการเปลี่ยนแปลงสไตล์ จะต้องแก้ไขในทุกๆ Element ที่มีการใช้ Inline CSS
• ทำให้โค้ด HTML อ่านยาก: การมี CSS Style แทรกอยู่ใน HTML Tag ทำให้โค้ดดูรกและซับซ้อน
• ไม่เป็นไปตามหลักการ Separation of Concerns: HTML ควรทำหน้าที่แสดงโครงสร้างของเนื้อหา ส่วน CSS ควรทำหน้าที่ในการจัดรูปแบบ การใช้ Inline CSS ทำให้ทั้งสองส่วนปะปนกัน

สรุป: Inline CSS เหมาะสำหรับการทดลองหรือปรับแต่งสไตล์เล็กๆ น้อยๆ แต่ไม่แนะนำให้ใช้ในโปรเจกต์ขนาดใหญ่ เพราะจะทำให้โค้ดซับซ้อนและยากต่อการบำรุงรักษา

Internal CSS

Internal CSS คือการเขียน CSS Style ไว้ใน <style> Tag ภายใน <head> Tag ของ HTML Document วิธีนี้ช่วยให้เราสามารถกำหนดสไตล์ให้กับทั้งหน้าเว็บได้จากที่เดียว

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        p {
            color: green;
            font-size: 18px;
        }

        h2 {
            color: purple;
        }
    </style>
</head>
<body>
    <h2>หัวข้อนี้จะเป็นสีม่วง</h2>
    <p>ข้อความนี้จะเป็นสีเขียวและมีขนาด 18 พิกเซล</p>
</body>
</html>

ในตัวอย่างข้างต้น เราได้กำหนดให้ Paragraph Element ทั้งหมดในหน้าเว็บเป็นสีเขียวและมีขนาด 18 พิกเซล และกำหนดให้ Heading 2 Element เป็นสีม่วง โดยการเขียน CSS Style ไว้ใน <style> Tag ภายใน <head> Tag

ข้อดีของ Internal CSS:

• ง่ายต่อการจัดการสไตล์ของทั้งหน้า: สามารถกำหนดสไตล์ให้กับทุก Element ในหน้าเว็บได้จากที่เดียว
• ไม่ต้องโหลดไฟล์ CSS เพิ่มเติม: สไตล์ทั้งหมดอยู่ใน HTML Document ทำให้ไม่ต้องมีการ Request ไฟล์เพิ่มเติม

ข้อเสียของ Internal CSS:

• ไม่สามารถนำกลับมาใช้ใหม่ได้ในหน้าอื่น: สไตล์ที่กำหนดจะใช้ได้เฉพาะในหน้าเว็บนั้นๆ เท่านั้น
• ทำให้ HTML Document ยาวขึ้น: การมี CSS Style อยู่ใน <head> Tag ทำให้ HTML Document มีขนาดใหญ่ขึ้น
• ไม่เหมาะสำหรับเว็บไซต์ขนาดใหญ่: หากมีหลายหน้าเว็บ แต่ละหน้าจะต้องมี CSS Style ของตัวเอง ทำให้ยากต่อการบำรุงรักษา
• ยังไม่เป็นไปตามหลักการ Separation of Concerns อย่างสมบูรณ์: แม้ว่าจะแยก CSS ออกจาก HTML Tag แล้ว แต่ CSS ก็ยังคงอยู่ใน HTML Document

สรุป: Internal CSS เหมาะสำหรับเว็บไซต์ขนาดเล็กที่มีจำนวนหน้าไม่มากนัก และต้องการความสะดวกในการจัดการสไตล์ของแต่ละหน้า

External CSS

External CSS คือการเขียน CSS Style ไว้ในไฟล์แยกต่างหาก (โดยมีนามสกุลเป็น .css) แล้ว Link ไฟล์ CSS นั้นเข้ามาใน HTML Document โดยใช้ <link> Tag วิธีนี้เป็นวิธีที่นิยมใช้กันมากที่สุด เพราะช่วยให้โค้ดเป็นระเบียบและง่ายต่อการบำรุงรักษา

ตัวอย่าง:

1. สร้างไฟล์ CSS (เช่น style.css)

body {
    background-color: #f0f0f0;
}

h1 {
    color: navy;
    text-align: center;
}

2. Link ไฟล์ CSS ใน HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ยินดีต้อนรับสู่เว็บไซต์</h1>
    <p>นี่คือเนื้อหาของเว็บไซต์</p>
</body>
</html>

ในตัวอย่างข้างต้น เราได้สร้างไฟล์ CSS ชื่อ style.css และกำหนดให้ Background ของ <body> เป็นสีเทาอ่อน (#f0f0f0) และ Heading 1 Element เป็นสีน้ำเงิน (navy) และอยู่กึ่งกลาง (text-align: center) จากนั้นเราได้ Link ไฟล์ CSS นี้เข้ามาใน HTML Document โดยใช้ <link> Tag ภายใน <head> Tag

ข้อดีของ External CSS:

• สามารถนำกลับมาใช้ใหม่ได้ในหลายหน้า: สไตล์ที่กำหนดในไฟล์ CSS สามารถนำไปใช้กับหลายหน้าเว็บได้ เพียงแค่ Link ไฟล์ CSS นั้นเข้ามา
• ง่ายต่อการบำรุงรักษา: หากมีการเปลี่ยนแปลงสไตล์ สามารถแก้ไขได้ในไฟล์ CSS เพียงไฟล์เดียว สไตล์ก็จะถูกปรับเปลี่ยนในทุกหน้าเว็บที่ Link ไฟล์ CSS นั้น
• ทำให้ HTML Document สะอาด: HTML Document จะมีเฉพาะโครงสร้างของเนื้อหา ทำให้โค้ดอ่านง่ายและเป็นระเบียบ
• เป็นไปตามหลักการ Separation of Concerns: HTML ทำหน้าที่แสดงโครงสร้างของเนื้อหา ส่วน CSS ทำหน้าที่ในการจัดรูปแบบอย่างชัดเจน
• Cacheable: Browser สามารถ Cache ไฟล์ CSS ไว้ได้ ทำให้หน้าเว็บโหลดได้เร็วขึ้นในครั้งต่อไป

ข้อเสียของ External CSS:

• ต้องมีการ Request ไฟล์ CSS เพิ่มเติม: Browser จะต้อง Request ไฟล์ CSS จาก Server ทำให้หน้าเว็บอาจโหลดช้าลงเล็กน้อย (แต่สามารถแก้ไขได้ด้วยการใช้เทคนิค Optimization ต่างๆ)
• อาจเกิดปัญหา CSS Specificity: หากมีการกำหนดสไตล์ที่ขัดแย้งกันในหลายไฟล์ CSS อาจทำให้เกิดปัญหา CSS Specificity ซึ่งจะต้องแก้ไขด้วยการใช้ Selector ที่เฉพาะเจาะจงมากขึ้น หรือใช้ !important (แต่ควรหลีกเลี่ยงการใช้ !important โดยไม่จำเป็น)

สรุป: External CSS เป็นวิธีที่แนะนำให้ใช้ในการพัฒนาเว็บไซต์ เพราะช่วยให้โค้ดเป็นระเบียบ ง่ายต่อการบำรุงรักษา และสามารถนำกลับมาใช้ใหม่ได้ในหลายหน้า

ตารางสรุปข้อดีข้อเสียของการใช้งาน CSS แต่ละแบบ

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับ CSS Box Model ซึ่งเป็นพื้นฐานสำคัญในการจัด Layout ของเว็บไซต์