CSS (Cascading Style Sheet)
1. เริ่มรู้จัก CSS
CSS (Cascading Style Sheet) จัดเป็นภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสารHTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C
ก่อนหน้าการถือกำเนิดของ CSS level 1 Recommendations นั้น การจัดรูปแบบของข้อความในเอกสาร HTML ใช้แท็ก (Tag) ควบคุมรูปแบบข้อความ กำหนดขอบเขตของข้อความส่วนที่ต้องการแสดงผล ซึ่งในเอกสาร HTML ฉบับเดียวกัน หรือ เอกสาร HTMLหลายฉบับภายในเว็บไซต์เดียวกัน มักกำหนดแท็กสำหรับแสดงผลคล้ายๆ กัน เพื่อให้รูปแบบการแสดงผลสอดคล้องกัน เช่น รูปแบบของหัวข้อจะซ้ำกัน และรูปแบบการจัดวางหน้าเอกสารจะเหมือนกัน เป็นต้น ซึ่งการที่ต้องระบุแท็ก ควบคุมรูปแบบเดียวกันซ้ำกันหลายที่ในเอกสาร ทำให้การจัดรูปแบบเอกสารทำได้ไม่สะดวกนัก ตัวอย่างเช่น แท็ก <FONT> และ ส่วนขยายของแท็ก (แอ็ททริบิวต์ หรือ attribute)COLOR เพื่อกำหนดสีให้กับข้อความจะต้องแทรกไว้ในทุกๆ ตำแหน่งของข้อความที่ต้องการกำหนดสี เป็นต้น
นอกจากนั้นโปรแกรมที่ทำหน้าที่เว็บบราวเซอร์จะทำหน้าที่แปลความหมายของแท็ก ในเอกสาร HTML และแสดงผลลัพธ์ออกทางหน้าจอได้แก่ โปรแกรมประยุกต์ประเภทเว็บบราวเซอร์ ซึ่งโปรแกรมประเภทนี้ มีจำนวนมากมาย หลายโปรแกรม แต่โปรแกรมเว็บบราวเซอร์ที่เป็นที่นิยมมากที่สุด 2 โปรแกรม ได้แก่ Netscape และ Internet Explorer
ซึ่งโปรแกรมเว็บบราวแต่ละโปรแกรม สนับสนุนลักษณะการกำหนดรูปแบบการแสดงผลของเอกสาร HTML เพิ่มเติมจากข้อกำหนดมาตรฐานของ HTML เพื่อให้การแสดงผลเนื้อหาเอกสารทำได้หลากหลายรูปแบบ ดังนั้น หากเอกสาร HTML มีการเรียกใช้แท็ก และแอททริบิวต์ที่กำหนดขึ้นใช้งานเฉพาะเจาะจงกับโปรแกรมเว็บบราวเซอร์แต่ละโปรแกรม มีผลทำให้การแสดงผลเอกสารที่เหมาะสม ทำได้กับเฉพาะบางเว็บบราวเซอร์ที่สนับสนุน และอาจไม่สามารถแสดงผลได้ถูกต้องเหมาะสมด้วยโปรแกรมเว็บบราวเซอร์โปรแกรมอื่น
ด้วยสาเหตุดังกล่าว ทำให้การสร้างเว็บเพจในขณะนั้น แยกส่วนการกำหนดรูปแบบการแสดงผลเอกสาร ออกจากเนื้อหาของเอกสาร ทำได้ยาก นอกจากนั้น รูปแบบการแสดงผลยังอาจขึ้นอยู่กับโปรแกรมเว็บบราวเซอร์เฉพาะบางโปรแกรม ดังนั้น เพื่อที่จะลดปัญหาดังกล่าว องค์กร World Wide Web Consortium หรือ W3C ได้กำหนดมาตรฐานของ การกำหนดรูปแบบการแสดงผลเอกสาร HTMLในรูปแบบของ CSS level 1 Recommendation ขึ้น และแทรกเข้าไปในมาตรฐานของข้อกำหนดภาษา HTML 4.0 ซึ่งโปรแกรม Netscapeเวอร์ชันตั้งแต่ 4.0 ขึ้นไป รวมทั้ง โปรแกรม Internet Explorer ตั้งแต่เวอร์ชัน 4.0 ขึ้นไป สนับสนุนมาตรฐานของการกำหนดรูปแบบการแสดงผล HTML ดังกล่าว
ดังนั้น ผู้สร้างเอกสาร HTML สามารถใช้ CSS กำหนดรูปแบบของข้อความในเอกสาร HTML ไว้เป็นรูปแบบ หรือ "Style" แทนการต้องกำหนดใหม่ทุกครั้งที่แสดงผลข้อความ ทำให้การจัดการรูปแบบข้อความทำได้สะดวกมากยิ่งขึ้น และสามารถออกรูปแบบการจัดวางเอกสารได้ โดยไม่ขึ้นกับเนื้อหาของเอกสาร นอกจากนั้นยังมีผลทำให้ขนาดของเอกสาร HTML ที่ใช้ CSS ในการจัดรูปแบบข้อความ ซึ่งอาจมีผลทำให้ขนาดของแฟ้มมีขนาดลดลง และทำให้สามารถใช้ช่องทางการสื่อสารเพื่อถ่ายโอนแฟ้มเอกสารผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้อย่างมีประสิทธิภาพมากขึ้น
หลังจากนั้น องค์กร W3C ได้กำหนด CSS level 2 Recommendations เพื่อเพิ่มเติมกฏเกณฑ์การกำหนดรูปแบบของสื่อที่ใช้การแสดงผลข้อมูล โดยผู้สร้างเอกสาร อาจเลือกใช้รูปแบบ หรือ "Style" ในการกำหนดรูปแบบให้แสดงผล หรือ กำหนดให้ไม่แสดงผลข้อมูล บนอุปกรณ์บางประเภทที่มีรูปแบบการแสดงผลข้อมูลต่างจากการแสดงออกทางหน้าจอปกติ โดยผู้สร้างเอกสารสามารถใช้ CSS ในกำหนดรูปแบบการแสดงผลที่เหมาะสม โดยไม่ขึ้นอยู่กับเนื้อหาภายในเอกสาร ตัวอย่างเช่น เอกสารฉบับเดียวกัน เมื่อแสดงผลบนอุปกรณ์สำหรับคนสายตาพิการ อาจกำหนดรูปแบบให้ไม่แสดงรูปภาพ แต่แสดงในรูปแบบอื่นที่เหมาะสม หรือ บนอุปกรณ์สำหรับคนหูหนวก อาจกำหนดไม่ให้ต้องแสดงข้อมูลเสียง แต่แสดงผลในรูปแบบของข้อความ เป็นต้น
2. การสร้างรูปแบบ (Style) การแสดงผลเอกสาร HTML โดยใช้ CSS
2.1 รูปแบบทั่วไปของการกำหนดรูปแบบ (Style) ด้วย CSS
รูปแบบทั่วไปของการจัดรูปแบบการแสดงผลเอกสาร HTML ด้วย CSS ประกอบด้วย ส่วนประกอบ 3 ส่วน ได้แก่ ตัวเลือก (Selector), คุณลักษณะ (Property) และ ค่าคุณลักษณะ (value) สามารถแสดงรูปแบบทั่วไปได้ดังนี้
selector { property: value }
ส่วนของ Selector อาจเป็นแท็ก HTML ที่ต้องการกำหนดรูปแบบ หรือชื่อคลาสที่กำหนดขึ้น ให้แท็กเรียกใช้เพิ่มเติมเป็นรูปแบบย่อย
ในส่วนของ Property จะมีชื่อของ Property ซึ่งอาจเป็น แอ็ททริบิวต์ของแท็กที่ต้องการกำหนด ตามด้วยเครื่องหมาย “:” (Colon) และค่า(value) ของคุณลักษณะ ซึ่ง Property เครื่องหมาย “:” และ Value นั้น ทั้งหมดถูกล้อมรอบด้วยเครื่องหมาย { และ } ดังตัวอย่างต่อไปนี้เป็นการกำหนด Style ของแท็ก <body> ที่กำหนดให้มีสี (Color) เป็นสีดำ (black)
ค่าคุณลักษณะหรือ Value ที่กำหนดให้กับ Property ใดๆ อาจเป็นค่าที่มีช่องว่างแทรกอยู่ระหว่างคำ กรณี Value มีช่องว่างระหว่างคำ ให้ใส่เครื่องหมาย “ ” ล้อมรอบ ดังตัวอย่างต่อไปนี้เป็นการกำหนด Style ของแท็ก <p> ที่ให้มีรูปแบบตัวอักษร (font-family) เป็น “sans serif”
p { font-family: "sans serif" }
ในแต่ละ Property อาจมี Value ได้มากกว่า 1 Value หากมีการกำหนดค่า Value มากกว่า 1 Value ให้กับ Property ใดๆ ให้คั่นแต่ละValue ด้วยเครื่องหมาย “,” (Comma) ดังตัวอย่างต่อไปนี้ เป็นการกำหนด Style ของแท็ก <p> ให้มีรูปแบบตัวอักษร (font-family) เป็น “sans serif”และ “Verdana”
p { font-family: "sans serif", Verdana }
หากต้องการกำหนด Property ให้กับ Selector มากกว่า 1 Property ให้แยกแต่ละ Property ออกจากกันด้วยเครื่องหมาย ; ดังตัวอย่างต่อไปนี้เป็น Style ของแท็ก <p> ที่กำหนดจัดรูปแบบข้อความให้อยู่กึ่งกลาง (Center) และเป็นสีแดง (red)
p { text-align:center; color:red }
หรือ อาจกำหนด 1 Property ต่อ 1 บรรทัด เพื่อให้อ่านได้ง่ายขึ้น ตัวอย่างต่อไปนี้เป็น Style ของแท็ก <p> ที่กำหนดจัดรูปแบบข้อความให้อยู่กึ่งกลาง (Center) เป็นสีดำ (black) และรูปแบบตัวอักษรเป็น arial
p
{
text-align: center;
color: black;
font-family: arial
}
2.2 การเขียนคำอธิบาย (Comment)
นอกจากนั้น ยังสามารถกำหนดคำอธิบาย (Comment) เอกสาร HTML เพื่อช่วยอธิบาย ซอสโค้ด (Source Code) ของเอกสาร HTML โดยโปรแกรมเว็บบราวเซอร์ จะไม่แปลความหมายในส่วนของ Comment ซึ่งการเขียน Comment ใน CSS ทำได้โดยใช้สัญลักษณ์ /* และ */ล้อมรอบข้อความที่เป็น Comment
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
2.3 การรวมกลุ่ม Selector
การกำหนด Style ให้กับ Selector นั้น อาจรวมกลุ่ม Selector ที่มี Style เดียวกันไว้ด้วยกัน โดยใช้เครื่องหมาย , คั่นกลางระหว่างSelector แต่ละคู่ ดังตัวอย่างต่อไปนี้เป็น Style ของที่กำหนด header ทุกแท็ก ให้เป็นสีเขียว (green)
h1,h2,h3,h4,h5,h6 { color: green }
2.4 การใช้ Class Selector
การกำหนด Style อาจใช้ Class Selector ในการกำหนด Style ที่แตกต่างกันของแท็ก HTML แท็กเดียวกัน เช่น ต้องการให้มีรูปแบบการจัดย่อหน้าในเอกสาร 2 รูปแบบ ได้แก่ ย่อหน้าชิดขวา และ ย่อหน้าอยู่กึ่งกลาง ตัวอย่างต่อไปนี้ เป็นกำหนรูปแบบข้อความให้อยู่ชิดขวา (right)และ อยู่กึ่งกลาง (Center)
p.right {text-align: right}
p.center {text-align: center}
โดยการเรียกใช้ Class Selector ในเอกสารนั้น สามารถกำหนดให้กับแท็กได้หลายประเภท แต่จะสามารถกำหนดรูปแบบได้เพียง 1คลาส ต่อ 1 แท็ก ไม่สามารถกำหนดรูปแบบหลายคลาส ให้กับแท็กเดียวกัน ดังตัวอย่างต่อไปนี้
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
โดยการกำหนดรูปแบบแท็ก นั้น ไม่จำเป็นต้องใส่ชื่อแท็ก ดังตัวอย่างต่อไปนี้
.center {text-align: center}
ทำให้สามารถเรียกใช้คลาสดังกล่าว ในการกำหนด style ของแท็กใดๆ ก็ได้ โดยการระบุ แอ็ททริบิวต์เพิ่มเติม ดังตัวอย่างต่อไปนี้
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
2.5 การใช้ ID Selector
การกำหนด Style โดยใช้ ID Selector ต่างจากการใช้ Class Selector โดยที่การกำหนด Class Selector สามารถกำหนด Style ให้กับแท็กหลายๆ แท็ก แต่ ID Selector มักนำไปใช้กับแท็กเพียงแท็กเดียวเท่านั้น ดังนั้น ID Selector จะต้องเป็นค่าที่ไม่ซ้ำกัน ดังตัวอย่างต่อไปนี้ เป็นการกำหนด Style ให้กับแท็กที่มี id เท่ากับ “wer345” และกำหนด Style ให้กับแท็ก <h1> ที่มี id เท่ากับ “wer346” ในบรรทัดที่ /*line 1*/ และ/* line2 */ ตามลำดับ
#wer345 { text-align: center; color: green} /* line 1 */
h1#wer346 { text-align: center; color : red } /* line 2 */
โดย Style ข้างต้น เป็นตัวอย่างการกำหนดรูปแบบตัวอักษรโดยใช้ ID Selector ซึ่งผลลัพธ์ของการเรียกใช้ ID Selector ทั้ง 2 บรรทัด อาจให้ผลลัพธ์ต่างกัน ยกตัวอย่างเช่น หากมีการนำรูปแบบดังกล่าวไปใช้ในส่วนของเอกสาร HTML ต่อไปนี้
<h1> Heading 1</h1>
<h1 id="wer345">Heading 2</h1>
<h1 id="wer346">Heading 3</h1>
<p id="wer346">Some text </p>
ผลลัพธ์ที่ได้จากหน้าจอเว็บบราวเซอร์ จะปรากฏดังต่อไปนี้
· แสดงผลข้อความ “Heading 1” โดยใช้ค่าปริยาย (Default Value) ในรูปแบบที่โปรแกรมเว็บบราวเซอร์ที่กำหนด (อาจเป็นตัวอักษรสีดำ บนพื้นหลังสีขาว และชิดซ้าย) เนื่องจากไม่ได้ระบุ ID ของ style ที่กำหนดไว้ให้กับแท็ก <h1> .. </h1> แต่อย่างใด
· แสดงผลข้อความ “Heading 2” โดยจัดให้อยู่กึ่งกลาง และเป็นตัวอักษรสีเขียว เนื่องจากมีการเรียกใช้ Style ที่กำหนดไว้ในบรรทัดที่/*line 1 */ ซึ่งเป็นการกำหนด style ของแท็ก มี ID เท่ากับ “wer345”
· แสดงผลข้อความ “Heading 3” โดยจัดให้อยู่กึ่งกลาง และเป็นตัวอักษรสีแดง เนื่องจากมีการเรียกใช้ ID เท่ากับ “wer346” ที่กำหนดไว้ให้แท็ก <h1> … </h1> ซึ่งกำหนดไว้ในบรรทัดที่ /*line 2 */
· แสดงผลข้อความ “Some text” โดยใช้ค่าปริยาย (Default Value) ในรูปแบบที่โปรแกรมเว็บบราวเซอร์ที่กำหนด (อาจเป็นตัวอักษรสีดำ บนพื้นหลังสีขาว และชิดซ้าย) เนื่องจากในบรรทัดที่ /*line 2 */ เป็นการกำหนด style ของแท็ก <h1> ที่มี ID เท่ากับ “wer346” เท่านั้น ไม่เกี่ยวข้องกับแท็กอื่นๆ ที่มีค่า id เท่ากับ “wer346”
3. วิธีการการกำหนดรูปแบบ (Style)
ส่วนของเอกสารที่ใช้กำหนด Style เรียกว่า “Style Sheet" โดยการกำหนดรูปแบบ Style sheet ให้กับเอกสาร HTML อาจทำได้ในหลายวิธี ได้แก่ การกำหนด Style ภายในคำสั่ง HTML 1 คำสั่ง (Inline Style) เช่น ภายในแท็ก <h1> เป็นต้น หรือ กำหนด Style ไว้ที่ส่วนหัว (head)ของเอกสาร HTML (Internal Style Sheet) ได้แก่ กำหนดไว้ระหว่างแท็ก <head>…</head> หรือ กำหนด Style เก็บไว้ในแฟ้มข้อมูล .css (External Style Sheet) แยกต่างหากจากเอกสาร HTML ก็ได้เช่นกัน
3.1 Inline Style
สามารถกำหนด Style ภายในคำสั่ง HTML 1 คำสั่ง โดยใช้แอ็ททริบิวต์ของคำสั่งที่ชื่อ “style” และกำหนดค่า (Value) ของรูปแบบที่ต้องการให้กับแอ็ททริบิวต์ดังกล่าว ยกตัวอย่างเช่น
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<p style="font-size: 20pt">This text has the <em>font-size</em>
style applied to it, making it 20pt. </p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and <em>color</em>
styles applied to it, making it 20pt. and blue.</p>
</body>
</html>
ข้อได้เปรียบของการกำหนด Inline Style นั้น ทำให้สามารถกำหนด Property และ Value ของ Style ภายในแท็กใดๆ ได้ ณ ตำแหน่งที่มีเนื้อหาของเอกสารปรากฏอยู่ ซึ่งสามารถกำหนด Value ให้กับ Property 1 Property ได้มากกว่า 1 Value หรือกำหนด Property กับ Style ได้มากกว่า 1 ค่าเช่นกัน แต่อย่างไรก็ตามการกำหนด Inline Style นั้น มีข้อด้อย อยู่ที่ สามารถกำหนด Style ให้กับแท็ก HTML ได้เพียง 1 แท็ก ณ ตำแหน่งที่กำหนด Style เท่านั้น และทำให้การแยกเนื้อหาออกจากการแสดงผลเอกสารทำได้ไม่สะดวก เนื่องจากต้องระบุ Style ให้กับแท็กทุกครั้งที่ต้องการแสดงผลเนื้อหาในเอกสาร
3.2 Internal Style Sheet
สามารถกำหนด Style ไว้ที่ส่วนหัว (head) ของเอกสาร HTML ระหว่างแท็ก <head> … </head> โดยใช้แท็กที่ชื่อ <style> … </style>และกำหนดแอ็ททริบิวต์ของแท็กชื่อ “type” และกำหนดค่าของแอ็ททริบิวต์เป็น “text/css” ยกตัวอย่างเช่น
<html>
<head>
<title> Cascading Style Sheets </title>
<style type = "text/css">
body { background-image: url("images/back40.gif") }
em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<body>
<h1 class = "special"> Status of this document </h1>
<p> This document is a W3C Recommendation. It has been reviewed by W3C (http://www.w3.org/) Members and general consensus that the specification is appropriate for use has been reached. It is a stable document and may be used as reference material or cited as a normative reference from another document. W3C promotes widespread deployment of this Recommendation. </p>
<h1> Abstract </h1>
<p class = "special"> This document specifies level 1 of the <em> Cascading Style Sheet mechanism (CSS1)</em>. CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The <em>CSS1</em> language is human readableand writable, and expresses style in common desktop publishing terminology. </p>
</body>
</html>
การกำหนด Internal Style นั้น สามารถกำหนด Style ไว้ล่วงหน้าตอนต้นของเอกสาร ไม่จำเป็นต้องกำหนดทุกครั้งที่มีการเรียกใช้งานแท็ก ซึ่งการนำ Internal Style Sheet ไปใช้นั้น ควรนำไปใช้เมื่อเอกสาร HTML ใดๆ มีการกำหนดรูปแบบการแสดงผลเนื้อหาในเอกสารให้เป็นไปในรูปแบบเดียวกัน ตัวอย่างเช่น ต้องการให้ทุกหัวเรื่อง (Heading) และ ทุกย่อหน้า (Paragraph) ให้มีรูปแบบการแสดงผลเหมือนกัน เป็นต้น โดยโปรแกรมเว็บบราวเซอร์จะอ่านข้อกำหนดของ Style ในส่วนหัวของเอกสาร และใช้ข้อกำหนดดังกล่าว ในการแสดงผลเอกสารตามรูปแบบที่กำหนดไว้ในแท็ก และแอ็ททริบิวต์ของแท็ก แต่อย่างไรก็ตามการกำหนด Internal Style นั้น มีข้อด้อย อยู่ที่ สามารถกำหนด Style ให้กับเอกสารHTML ได้เพียง 1 เอกสารเท่านั้น ไม่สามารถนำ Style ที่กำหนดไว้ไปใช้กับเอกสาร HTML ฉบับอื่นได้
3.3 External Style Sheet หรือ Embedded Style Sheet
เพื่อให้สามารถนำ Style ทีกำหนดไว้ไปใช้งานในเอกสารอื่นๆ ได้ โดยกำหนด Style แยกไว้ และบันทึกลงแฟ้มข้อมูลที่มีนามสกุล .css โดยภายในแฟ้มดังกล่าวจะต้องไม่มีคำสั่ง หรือแท็กใดๆ ของเอกสาร HTML ซึ่งแฟ้มดังกล่าวสามารถใช้โปรแกรม Text Editor ใดๆ ในการสร้างก็ได้ แต่ต้องกำหนดนามสกุลเป็น .css ยกตัวอย่างเช่น กำหนด Style ไว้ในแฟ้มชื่อ “mystyle.css” ดังต่อไปนี้
/* An external stylesheet */
a { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #ccffcc }
h2 { color: red; font-weight: bold; background-color: #ffffff }
ul { text-decoration: underline; margin-left: .5cm }
โดยแฟ้มชื่อ “mystyle.css” ถูกเรียกใช้จากแฟ้มเอกสาร HTML โดยใช้แท็ก <link /> อยู่ระหว่างแท็ก <head.>…</head> โดยกำหนดแอ็ททริบิวต์ชื่อ “type” และ “href” ให้กับแท็ก <link /> โดยกำหนดค่าให้กับแอ็ททริบิวต์ “type”เป็น “text/css” และกำหนดค่าให้กับแอ็ททริบิวต์“href” เป็น ชื่อและนามสกุลของแฟ้มทีเป็น External Style Sheet รวมถึงเส้นทางอ้างอิงของแฟ้มดังกล่าว (ถ้ามี) ดังตัวอย่างต่อไปนี้
:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
:
สามารถนำ External Style Sheet ไปใช้ เมื่อต้องการ กำหนด Style ให้กับเอกสาร HTML จำนวนมากกว่า 1 หน้าเอกสารขึ้นไป ซึ่งการใช้ External Style Sheet ทำให้ผู้จัดทำเว็บไซต์ สามารถเปลี่ยนแปลงรูปแบบการแสดงผลเอกสารทั้งเว็บไซต์ได้ โดยเปลี่ยนแปลง Style ในแฟ้ม.css เพียงแฟ้มเดียว
4. ลำดับรูปแบบการแสดงผลโดยใช้ Style Sheet
ในแฟ้มเอกสาร HTML แฟ้มหนึ่ง แฟ้มใดนั้น อาจกำหนด Style Sheet นั้น อาจใช้หลายรูปแบบร่วมกัน (Multiple Style Sheet) ก็ได้ ซึ่งอาจเป็นไปได้ที่มีการกำหนด Style ให้กับ Selector เดียวกันมากกว่า 1 Style ตัวอย่างเช่น หากมีการใช้ทั้ง Internal Style Sheet และ Inline Styleกับแท็ก <p> ตัวอย่างเช่น
<html>
<head>
<title>Multiple Style Sheet </title>
<style type = "text/css">
p { font-size: 14pt; }
</style>
</head>
<body>
<h2>This heading text does not have any style applied to it.</h2>
<p>This text has Inline Style applied to it.</p>
<p style="font-size: 20pt">This text has the <em>font-size</em>
style applied to it, making it 20pt. </p>
</body>
</html>
}
ซึ่งจากตัวอย่างดังกล่าว ข้อความที่อยูระหว่างแท็ก <p> … </p> คู่แรกไม่มีการกำหนด Inline Style ในกรณีนี้ โปรแกรมเว็บบราวเซอร์จะใช้ Style ที่กำหนดโดย Internal Style Sheet ส่วนข้อความที่อยู่ระหว่างแท็ก <p>…</p> คู่ที่สอง มีการกำหนด Inline Style ในกรณีนี้โปรแกรมเว็บบราวเซอร์จะใช้ Style ที่กำหนดโดย Inline Style เนื่องจากโปรแกรมเว็บบราวเซอร์ให้ความสำคัญของ Inline Style มากกว่าของ Internal Style Sheet
กฏการจัดลำดับความสำคัญ (Rule of Cascading Order) ของการแสดงผลเอกสาร HTML ที่ถูกกำหนดโดยใช้ CSS สามารถแสดงได้ตามลำดับ ดังต่อไปนี้
· ค่า Style ที่ถูกกำหนดไว้ภายในคำสั่ง HTMLใดๆ (Inline Style)
· ค่า Style ที่ถูกกำหนด Style อยู่ระหว่างแท็ก <head>…</head> (Internal Style Sheet)
· ค่า Style ที่ถูกกำหนด Style ไว้ภายในแฟ้มข้อมูล .css (External Style Sheet)
· ค่า Style ที่ถูกกำหนดโดยปริยายจากโปรแกรมเว็บบราวเซอร์ (Browser Default)
เมื่อ Inline Style มีลำดับความสำคัญสูงที่สุด หมายความว่า ถ้าหากมีการกำหนด Inline Style ให้กับแท็ก HTML หรือ Selector ใดๆ แล้วStyle ที่โปรแกรมเว็บบราวเซอร์ใช้ในการแสดงผลจะใช้ Inline Style เสมอ ซึ่งหากไม่มี Inline Style ของแท็ก HTML หรือ Selector ดังกล่าว กำหนดไว้ให้กับแท็ก HTML จะใช้ Internal Style หากไม่มี Internal Style ของแท็ก HTML ประกาศไว้ จะใช้ External Style และหากไม่มีการกำหนด Style ใดๆไว้ โปรแกรมเว็บบราวเซอร์ จะใช้ค่าที่กำหนดโดยปริยายของโปรแกรมในการแสดงผล
อย่างไรก็ตาม ถึงแม้ว่าอาจมีการกำหนด Style ให้กับคำสั่ง HTML คำสั่งเดียวกัน หรือ Selector เดียวกันมากกว่า 1 Style ซึ่งลำดับความสำคัญของการแสดงผลจะแสดงได้ดัง กฏการจัดลำดับความสำคัญ (Rule of Cascading Order) ที่กล่าวมาข้างต้น แต่อาจมีบางกรณีมี Style ที่กำหนดให้กับ Selector โดยใช้ค่าของ Property นั้นมากกว่า 1 Property และแต่ละ Style ของ หรือ Selector เดียวกันนั้น อาจมีจำนวน Property ต่างกัน ซึ่งหาก Property ต่างกันแล้ว ค่าของ Property ที่แตกต่างกันนั้น สามารถถ่ายทอดคุณสมบัติ (inherit) จากที่มีความสำคัญน้อยกว่า มายัง Style ที่มีความสำคัญมากกว่า ยกตัวอย่างเช่น กำหนด External Style Sheet ให้มี Property จำนวน 3 Property ให้กับ selector <h3> ดังต่อไปนี้
/* An external stylesheet “hstyles.css” */
h3 { color: red; text-align: left; font-size: 8pt }
และ หากมีการกำหนด Internal Style ให้กับแท็ก <h3> ในเอกสาร HTML ดังต่อไปนี้
:
<link rel="stylesheet" type="text/css" href="hstyles.css" />
<style type = "text/css">
h3 {text-align: right; font-size: 20pt}
</style>
:
ซึ่งภายในเอกสาร HTML ดังกล่าว หากมีการเรียกใช้งาน <h3> … </h3> นอกจากแท็ก <h3> จะมี Property ตามที่กำหนดไว้ในInternal Style Sheet อันได้แก่ “text-align:right” และ “font-size:20pt” แล้ว แท็ก <h3> ยังได้รับถ่ายทอดคุณสมบัติของ Property จาก External Style Sheet ในส่วนของ Property ที่ไม่ซ้ำซ้อนกัน ดังนั้น Property ของแท็ก <h3> จะมีรายละเอียดดังต่อไปนี้ ได้แก่ “color: red” , “text-align: right;” และ “font-size: 20pt”
