CSS Class và ID


<style>
  p {
     color: red;
  }
</style>

<p>Welcome to CSS</p>
<p>This is a paragraph</p>


Welcome to CSS

This is a paragraph

=> Ta thấy thêm css vào thẻ thì tất cả các thẻ p đều sẽ có màu đỏ.

Để chỉ có 1 thẻ nào đó có màu đỏ ta dùng ID để thêm css vào. Ví dụ sau ta thêm id vào thẻ p đầu tiên và ta muốn thẻ này có màu đỏ.

<style>
  #header {
     color: red;
  }
</style>

<p id="header">Welcome to CSS</p>
<p>This is a paragraph</p>

This is a paragraph

=> Nếu ta muốn 2 thẻ đầu tiên có màu đỏ. Thì ta dùng id không được. Tại vì id là duy nhất không thể có 2 id trùng tên. Do đó ta dùng class , class có thể dùng cho nhiều thẻ được. Ta xem ví dụ sau.

<style>
   .header {
     color: red;
   }
</style>

<p class="header">Welcome to CSS</p>
<p class="header">This is a paragraph</p>
<p>Another paragraph</p>

Welcome to CSS

This is a paragraph

Another paragraph

=> Ngoài ra ta có thể thêm nhiều class vào trong thẻ. Ta xem ví dụ sau:

<style>
  .header {
    color: red;
  }

  .base  {
    font-family: "Tahoma";
    font-weight: bold;
  }
</style>

<p class="header base ">Welcome to CSS</p>
<p class="header">This is a paragraph</p>
<p>Another paragraph</p>

Welcome to CSS

This is a paragraph

Another paragraph

Nhưng nếu có css cho thẻ, css cho class và css cho id được áp vào cùng 1 thẻ thì cái nào được ưu tiên hơn. Thứ tự ưu tiên là ID > Class > Tag. Ta xem ví dụ sau:

<style>
  p {
    color: yellow;
  }
 .myClass {
    color: red;
  }

  #myId  {
    color: blue;
  }
</style>

<p class="myClass" id="myId">Welcome to CSS</p>

Welcome to CSS

=> Kết quả là ID ưu tiên cao nhất nên ta thấy text "Welcome to CSS" có màu blue.

=> Như vậy là ta biết dùng class và id rồi nhé. Chúc vui ^_^.