วิธีการรวม CSS ในหน้า HTML (ฉบับสมบูรณ์)

เราสามารถรวม CSS ในหน้า HTML ได้ 3 วิธี:

• Inline - ระบุสไตล์ในแอตทริบิวต์ style ขององค์ประกอบ แนะนำให้ใช้ Internal/External เพื่อแยกไฟล์ (modularize)
• Internal - วางข้อกำหนด CSS ในแท็ก <style> ภายใน <head>
• External - ลิงก์ไฟล์ .css ด้วยแท็ก <link> ไฟล์อาจอยู่ local หรือ server Refactoring ด้วย External ช่วยให้มีไฟล์ CSS ร่วมใช้หลายหน้า

ไวยากรณ์ (Syntax)

/* Inline */
<element style="/*declarations*/"></element>

/* Internal */
<head>
  <style> /*declarations*/ </style>
</head>

/* External */
<head>
  <link rel="stylesheet" href="#location">
</head>

ตัวอย่างที่ 1: Inline CSS

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div style="background-color:mistyrose; height: 50px;"></div>
  <p style="letter-spacing: 16px; font-size: 1.3em;">
    <u>Demo text here</u>
  </p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    table, table * { border: 5px double green; margin: auto; padding: 20px; }
    tr { box-shadow: 0 0 0 3px red; }
    td { border-color: blue; }
  </style>
</head>
<body>
  <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </table>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 3: External CSS

HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div>
    <div></div>
    <div> <div></div> </div>
    <div></div>
  </div>
</body>
</html>

CSS file (style.css):

div {
  margin: auto; padding: 15px; width: 33%;
  border: 2px solid; border-radius: 50%;
}
div > div { border-color: green; }
div > div > div { border-color: red; }

ผลลัพธ์

แนวทางปฏิบัติที่ดีที่สุด (Best Practices)

1. ใช้ External CSS สำหรับโปรดักชัน - แยกความกังวล (Separation of Concerns)
ใช้ media attribute สำหรับ responsive: <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
2. รวมไฟล์ CSS (concatenate) และบีบอัด (minify) เพื่อลด HTTP requests
3. ใช้ CSS Custom Properties (variables) เพื่อความสอดคล้อง