วิธีใช้ Internal CSS (Internal Style Sheet) ใน HTML

Internal CSS คือการเขียน CSS ไว้ในแท็ก <style> ภายใน <head> ของหน้า HTML ใช้สำหรับ style ที่ใช้ในหน้านั้นๆ เท่านั้น

โครงสร้าง

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules ที่นี่ */
    h1 { color: red; }
    p { font-size: 16px; line-height: 1.6; }
  </style>
</head>
<body>...</body>
</html>

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { color: red; }
    p { font-size: 12px; }
  </style>
</head>
<body>
  <h1>Tutorials</h1>
  <p>We provide free tutorials for engineers and professionals.</p>
</body>
</html>

ข้อดี/ข้อเสีย

ข้อดี	ข้อเสีย
ไม่ต้องโหลดไฟล์เพิ่ม (faster สำหรับหน้าเดียว)	ไม่ reuse ได้ระหว่างหน้า
Override external CSS ได้	เพิ่มขนาด HTML file
เหมาะสำหรับ critical CSS / above-the-fold	บำรุงรักษายากถ้ามีหลายหน้า

แนวทางปฏิบัติที่ดี

ใช้สำหรับ: Critical CSS, Page-specific styles, Email templates
ไม่ใช้สำหรับ: Global styles, Component styles, Large projects
ใน Production ควรใช้ External CSS + Critical CSS inline