วิธีใช้ Style Sheet ใน HTML

Stylesheet ใช้ใน HTML เพื่ออธิบายว่าเอกสารถูกนำเสนอบนหน้าจออย่างไร ด้วย CSS สามารถระบุคุณสมบัติการจัดรูปแบบจำนวนมากสำหรับ HTML element ได้ แต่ละคุณสมบัติมีชื่อและค่า แยกด้วย colon (:)

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

• External Style Sheet - กำหนดกฎ stylesheet ในไฟล์ .css แยก แล้วรวมใน HTML ด้วยแท็ก <link>
• Internal Style Sheet - กำหนดกฎ stylesheet ในส่วน header ของ HTML โดยใช้แท็ก <style>
• Inline Style Sheet - กำหนดกฎ stylesheet โดยตรงพร้อมกับ HTML elements โดยใช้ attribute style

จำไว้ว่า แต่ละ property declaration แยกด้วย semicolon (;) ใช้ attribute style เพื่อเพิ่ม CSS ให้ HTML elements และ attributes นี่คือวิธีเพิ่ม inline stylesheet และตั้งค่าสีข้อความ:

ตัวอย่าง

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML style sheet</title> 
  </head> 
  <body> 
    <h1 style="color:red"> 
      Heading 
    </h1> 
    <p style="color:blue"> 
      This is demo text 
    </p> 
  </body> 
</html>

ผลลัพธ์