การทำงานกับแอลิเมนต์ <style> สำหรับ CSS

Embedded CSS: ใช้แอลิเมนต์ <style> ใน HTML

คุณสามารถวางกฎ CSS ลงในเอกสาร HTML ได้โดยใช้แอลิเมนต์ <style> แท็กนี้จะถูกวางไว้ภายใน <head>...</head> กฎที่กำหนดจะมีผลกับองค์ประกอบทั้งหมดในเอกสาร

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ Embedded CSS ด้วยแอลิเมนต์ <style>:

<!DOCTYPE html>
<html>
  <head>
    <style media="all">
      body {
        background-color: linen;
      }
      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

วิธีนี้เหมาะสำหรับสไตล์ที่ใช้เฉพาะหน้าเว็บเดียว ไม่ต้องสร้างไฟล์ CSS แยกต่างหาก