Style cho phần tử bằng cách dùng tham chiếu đến id

Ngoài các class, mỗi phần tử HTML cũng có thể có thuộc tính id.

Bạn có thể sử dụng id để tạo style cho một phần tử duy nhất và sau đó bạn có thể sử dụng chúng để chọn và sửa đổi các phần tử cụ thể bằng JavaScript.
 
Các thuộc tính id phải là duy nhất. Mặc dù bạn đặt id giống nhau cho nhiều phần tử cũng không bị cảnh báo lỗi, tuy nhiên, id là duy nhất cho một phần tử được các lập trình chấp nhận rộng rãi.

Vì vậy, KHÔNG tạo nhiều hơn một phần tử có cùng thuộc tính id.
 
Dưới đây là ví dụ về cách bạn cung cấp id cat-photo-app cho phần tử h2 của bạn

            <h2 id="cat-photo-app">Đây là thẻ H2 có ID là cat-photo-app</h2>
        

Bài tập: Cung cấp cho phần tử form của bạn id có tên là cat-photo-form

Một điều thú vị về các thuộc tính id là, giống như các class, bạn có thể tạo kiểu cho chúng bằng cách sử dụng CSS.
 
Tuy nhiên, một id không thể sử dụng lại và chỉ nên được áp dụng cho một phần tử.
 
Một id cũng có tầm quan trọng hơn so với một class vì vậy nếu cả hai được áp dụng cho cùng một phần tử và có style xung đột với nhau thì, style của id sẽ được áp dụng.
 
Dưới đây là ví dụ về cách bạn có thể lấy phần tử của mình bằng thuộc tính id của cat-photo-element và cung cấp cho nó màu green làm nền. Trong phần tử style của bạn:

            #cat-photo-element {
  background-color: green;
}
        

Lưu ý rằng bên trong phần tử style của bạn, bạn luôn tham chiếu các class bằng cách đặt một dấu chấm . trước tên của class. Còn với id, bạn luôn tham chiếu các id bằng cách đặt dấu # trước tên của chúng.

Hãy thử áp dụng vào form của bạn, bây giờ hãy thử thêm thuộc tính id của cat-photo-form, một nền màu green.