หลังจากพอได้รู้คร่าว ๆ ว่า CSS นั้นคืออะไร แต่เราก็ยังไม่รู้ว่าจะใช้งานได้อย่างไร การเริ่มต้นใช้งานนั้น ต้องเริ่มจาก Selector ก่อน CSS Selector เป็นสิ่งที่สำคัญที่สุดของการใช้งาน CSS เราจะมาดูการทำ CSS Selector แบบง่าย ๆ กันก่อน

CSS Type Selectors 

เป็น CSS Selectors จาก HTML Tags หรือ องค์ประกอบ ของ XHTML

ตัวอย่าง

 
p {
     color: red;
}

h1 {
     font-size: 16px;
}
 

Descendant selectors

 เป็น CSS Selectors จากการสืบทอดของ HTML Tags เรามาลองดูตัวอย่าง CSS Selectors แบบ Descendant Selectors กัน

HTML :

 
<H1>This headline is <EM>very</EM> important</H1>
 

CSS Selectors แบบ ปรกติ

 
h1 {
     color: red;
}

em {
     color: red;
}
 

CSS Selectors แบบ Descendant Selectors

 
h1 {
     color: red;
}

em {
     color: red;
}

h1 em {
     color: blue;
}
 

สังเกตุได้ว่า CSS Selectors แบบ Descendant Selectors นั้น จะมีผลกับ HTML tags ที่มีการขึ้นต่อกัน หรือสืบทอดกันมา ภายใต้ tags เดียวกัน 

Class Selectors

CSS Selectors แบบ Class Selectors นั้น จะเลือก node จาก Attribute ของ HTML tags ที่ มี class ตามที่เรากำหนด โดยการอ้างถึง class ของ HTML ใน CSS นั้นจะใช้เครื่องหมาย . ( Dot ) ในการอ้างถึง class นั้น ๆ ตัวอย่าง

HTML : 

 
<H1>Not Green</H1>
<H1 class="pastoral">Very Green</H1>
 

CSS Selectors แบบ Class Selectors

 
.pastoral  {
     color: green;
}
 

หรือ 

 
h1.pastoral {
     color: green;
}
 

CSS Selectors ทั้ง 2 แบบ ต่างก็แสดงผลได้เหมือนกัน แต่ต่างกันตรงที่ การเขียนแบบที่สอง มีการระบุทั้ง 2 เงื่อนไข คือต้องมี Type Selectors เป็น h1 และต้องมี Class Selectors เป็น pastoral เท่านั้น

ID Selectors

CSS Selectors แบบ ID Selectors นั้นจะเลือก node จาก Attribute ของ HTML ที่ระบุ ID ตามที่เรากำหนด โดยการอ้างถึง ID ใน CSS นั้น ใช้เครื่องหมาย # ( Sharp ) ในการระบุ ถึง CSS Selectors แบบ ID Selectors

HTML : 
 

 
<H1 >no Chapter</H1>
<H1 id="chapter" >Chapter </H1>
 

CSS : 

 
#chapter {
     color: green;
}
 

หรือ 

 
h1#chapter {
    color: green;
}
 

ข้อสังเกตุ ระหว่าง CSS Selectors แบบ Class Selectors กับ ID Selectors นั้นก็คือ หลักการของ class ใน HTML 1 หน้า จะประกอบไปด้วย HTML tags class เดียวกันหลาย ๆ class ได้ แต่ ID ในมีได้เพียง ที่มี 1 ID ใน 1 หน้า เท่านั้น ใน HTML Tags

CSS Selectors แบบง่าย ๆ ก็มีเพียงเท่านี้ ตอนต่อไปจะแนะนำ CSS Selectors แบบ Advance กัน