ใช้สไตล์ชีตในรูปแบบ HTML เพื่ออธิบายวิธีการนำเสนอเอกสารบนหน้าจอ ด้วย CSS คุณสามารถระบุคุณสมบัติสไตล์จำนวนหนึ่งสำหรับองค์ประกอบ HTML ได้อย่างง่ายดาย แต่ละคุณสมบัติมีชื่อและค่าซึ่งคั่นด้วยเครื่องหมายทวิภาค (:)
คุณสามารถใช้ CSS ได้สามวิธีในเอกสาร HTML ของคุณ -
- สไตล์ชีตภายนอก − กำหนดกฎของสไตล์ชีตในไฟล์ .css แยกต่างหาก จากนั้นรวมไฟล์นั้นในเอกสาร HTML ของคุณโดยใช้แท็ก HTML
- สไตล์ชีตภายใน − กำหนดกฎของสไตล์ชีตในส่วนหัวของเอกสาร HTML โดยใช้แท็ก
- สไตล์ชีตอินไลน์ − กำหนดกฎของสไตล์ชีตโดยตรงพร้อมกับองค์ประกอบ HTML โดยใช้แอตทริบิวต์สไตล์
โปรดจำไว้ว่าการประกาศพร็อพเพอร์ตี้แต่ละรายการคั่นด้วยเครื่องหมายอัฒภาค (;) ใช้แอตทริบิวต์ style เพื่อเพิ่ม CSS ให้กับองค์ประกอบและแอตทริบิวต์ HTML นี่คือวิธีที่คุณสามารถเพิ่มสไตล์ชีตแบบอินไลน์และตั้งค่าสีข้อความ -
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเพิ่มสไตล์ชีตให้กับหน้า HTML
<!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>
ผลลัพธ์