คราวที่แล้วเราพูดถึง simple selectors ไปแล้ว มาเพิ่มเติมกันต่อ simple selectors สามารถที่จะมี class และ id ที่ต่างกันได้ ตัวอย่าง

p.calss1{ color:#ffffff } หรือ p.calss2{ color:#000000 }

ตัวอย่าง มี 2 คลาส ชื่อว่า class1 และ class2เมื่อนำไปใช้ในไฟล์ html จะเป็นดังนี้

<p class=”class1″>จะได้ตัวหนังสือสีขาว </p>

หรือ

<p class=”class2″>จะได้ตัวหนังสือสีดำ </p>

อีกรูปแบบหนึ่งคือกำหนดแต่คลาสอย่างเดียว ไม่ต้องมี selectors เช่น

.small { font-size:10px }

รูปแบบนี้สามารถ นำคลาสไปใส่ที่ใดก็ได้ ภายในขอบเขตนั้น ก็จะมี ฟ้อนต์เท่ากับ 10 เช่น

<div class=”small”> ตัวหนังสือ </div>

จะสังเกตุเห้นว่า class จะมี . นำหน้า แต่ ID นั้น จะใช้ # นำหน้า ตัวอย่างการกำหนด ID เช่น

#bgw { backgroung-colour:#ffffff }

เมื่อนำไปใช้

<p id=”bgw”> ภายในนี้จะมี bg สีขาว </p>

แล้ว ID กับ Class ใช้ในกรณีไหนล่ะ? ID จะใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer ส่วน class ใช้เมื่อ จะมีการทำซ้ำหลายๆครั้ง เช่น .boxcontent

การตั้งชื่อ class และ id ก็ควรให้มีความสัมพันธ์กับส่วนที่นำไปใช้ และควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และ ตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่าบางชนิดครับ

Selectors 
อธิบายง่ายๆก็คือ tag ธรรมชาติที่เราใช้ๆกัน ใน html นั่นเอง ในไฟล์ .css เราจะเขียนเป็นรูปแบบ เช่น

body {
color:#000000;
font-size:14px;
}

หรือ

p {
color:red;
font-size:16px
}

รูปแบบจะเป็นแบบนี้ คือ tag { property : value ; } แต่ถ้ามีหลายๆ property ในบรรทัดสุดท้าย ไม่ต้องปิดด้วย ; ก็ได้ ให้ผลเหมือนกัน แต่ผมมักจะเขียน ; ทุกบรรทัดเพราะ กันพลาดนะครับ เมื่อกำหนดแบบนี้แล้ว text ที่อยู่ใน body ทั้งหมด จะเป็นสีดำ ฟ้อนต์ 14 และ ถ้าอยู่ใน <p>…..</p>จะเป็นสีแดง ขนาด 16