CSS Selectors

กรณีนี้ กำหนดตามชื่อ elements เช่น <p>

p {
  text-align: center;
  color: red;
}

กรณีนี้ กำหนดตามชื่อ id ที่ตั้ง จะใช้เครื่องหมาย # เช่น <div id = “text”>Hello</div>

#text {
  text-align: center;
  color: red;
}

กรณีนี้ กำหนดตามชื่อ class ที่ตั้ง จะใช้เครื่องหมาย . เช่น <div class= “text-center”> Welcome </div>

.text-center {
  text-align: center;
  color: red;
}

กรณีนี้ คือ class ที่อยู่ใน element เช่น <p class=”center”>HelloWorld</p>

p.center {
  text-align: center;
  color: red;
}

กรณีนี้ คือ มี element หลายตัว ต้องการให้มีรูปแบบเหมือนกัน สามารถรวมกันได้เลยโดยทำแบบนี้ เช่น <h1>Hello</h1> , <h3>Welcome</h3>, <p>Thailand</p>

h1,h3,p{
   color: blueviolet;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

อีกกรณีหนึ่งสุดท้ายนี้ คือ กำหนดมีรูปแบบ แบบนี้ทั้งหมด จะใช้เครื่องหมาย *

* {
text-align: center;
color: blue;
}