CSS (Cascading Style Sheets) คือภาษาที่ใช้อธิบายสไตล์และรูปแบบการนำเสนอของเอกสาร HTML ทำให้เราสามารถแยกส่วนของ "เนื้อหา (HTML)" ออกจาก "การนำเสนอ (CSS)" ได้อย่างชัดเจน สามารถเพิ่ม Style Sheet เข้าไปในเอกสาร HTML ได้ 3 รูปแบบหลักๆ ดังนี้
1. External Style Sheets
เป็นวิธีที่แนะนำที่สุด โดยการสร้างไฟล์ .css แยกต่างหาก แล้วเชื่อมโยงเข้ามาในหน้า HTML ด้วยแท็ก <link> วิธีนี้ทำให้สามารถใช้สไตล์เดียวกันในหลายๆ หน้าเว็บได้
<!-- ในไฟล์ index.html -->
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- ในไฟล์ style.css -->
body {
background-color: #f0f0f0;
}
2. Internal Style Sheets
เป็นการเขียน CSS ไว้ในแท็ก <style> ภายในส่วน <head> ของเอกสาร HTML ซึ่งจะมีผลเฉพาะกับหน้านั้นๆ เท่านั้น
<head>
<style>
h1 {
color: green;
}
p {
font-size: large;
}
</style>
</head>
3. Inline Styles
เป็นการกำหนดสไตล์โดยตรงที่ HTML element ผ่าน attribute style วิธีนี้ควรหลีกเลี่ยงหากไม่จำเป็น เพราะทำให้การแก้ไขและดูแลรักษาสไตล์ทำได้ยาก
<h1 style="color:blue; text-align:center;">This is a blue, centered heading</h1>