ตัวอย่าง
<html>
<body>
<head>
<style type="text/css">
<!--
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial }
--> </style>
</head>
<body>
<h1>โปรตีน</h1>
<p>ประกอบด้วย ธาตุคาร์บอน (C) ไฮโดรเจน (H) ออกซิเจน (O) ไนโตรเจน (N) ฟอสฟอรัส (P) และกำมะถัน (S) </p>
<h1>กรดอะมิโน</h1>
<p>คือ หน่วยเล็กที่สุดของโปรตีน</p>
</body>
</html>
ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกำหนด style ให้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสีดำ
selector แบบอื่นๆ
Selector ที่เป็น Class attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง
class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย "." นำหน้าชื่อ class
ตัวอย่าง
<html> <head> <style type="text/css"> <!-- .topic {color:red; font-family:Arial; font-weight:bold; text-align:center } .content {color:black; font-family:Arial; } --> </style> </head> <!-- การเรียกใช้งาน --> <body> <div class="topic">บทความ</div> <p class="topic"> หน่วยเล็กที่สุดของโปรตีน</p> <p class="content"> นักเรียนจะเห็นว่าน้ำมีประโยชน์มากมาย ดังที่กล่าวมาแล้ว ถ้านักเรียนขาดน้ำหรือสูญเสียน้ำมากไปจะเกิดโทษหลายประการ เช่น จะมีอาการกระหายน้ำอย่างรุนแรง ผิวแห้ง เยื่อบุอวัยวะต่าง ๆ แห้ง ปริมาณโปรตีนในเลือดเข้มข้น ปริมาณโซเดียมและ แร่ธาตุต่าง ๆ เข้มข้นมากขึ้น อาจทำให้หมดสติ</p> <p class="topic">สารอาหารที่มีมากที่สุดในร่างกาย </p>
<p class="content">ร่างกายของมนุษย์สูญเสียน้ำได้ทางอวัยวะต่อไปนี้ ผิวหนังขับน้ำในรูปของเหงื่อ ไตขับน้ำออกในรูปของปัสสาวะ
ปอดขับไปกับลมหายใจออก ลำไส้ใหญ่ขับน้ำไปกับอุจจาระ และทางอื่น ๆ ร่างกายเสียน้ำในรูปของน้ำตา น้ำลาย น้ำมูก
แต่ในปริมาณที่น้อยมาก เมื่อเทียบกับอวัยวะที่กล่าวมาแล้ว</p>
<p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p>
</body>
</html>
จากตัวอย่างสังเกตได้ว่า class topic ถูกเรียกใช้หลายครั้งใน <p> และ ถูกใช้้ในหลาย element ได้ คือ <p> และ <div>
แต่ถ้าต้องการกำหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทำได้โดยใส่ "p." นำหน้าชื่อ class
จะมีผลทำให้ข้อความใน <div class="topic">บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำหนดใน class topic ได้
p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center }
กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำหนดใน 2 class ก็สามารถทำได้
ตัวอย่าง
<html>
<head>
<style type="text/css">
p.center {text-align:center}
p.bold{ font-weight:bold}
</style>
</head>
<body>
<p class="center bold">ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p>
</body>
</html>
Selector ที่เป็น ID attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ต่างกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช้ # นำหน้า ID
ตัวอย่าง
<html>
<head>
<style type="text/css">
p {text-align: center}
#chapter {color:red; font-weight:bold}
/*หรือเขียนเป็น p#chapter ก็ได้*/
</style>
</head>
<body>
<p id="chapter">Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p>
<p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
<p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
</body>
</html>
