Cách chèn CSS vào HTML trong WordPress

Cập nhật: 18/06/2019

Để chèn CSS vào HTML trong WordPress, bạn có thể sử dụng 2 cách phổ biến:

  • Chèn trực tiếp CSS vào HTML
  • Chèn CSS Class hoặc ID vào HTML, rồi viết CSS riêng

Cách 1. Chèn trực tiếp CSS vào HTML

1. Mở bài viết, trang cần chèn CSS

beaverhero.com-edit-post1-min

2. Đổi văn bản qua HTML

Bấm vào văn bản để đổi định dạng bài viết qua HTML (điều này không ảnh hưởng gì tới bài viết)

truc-quan-van-ban1-min

3. Tìm tới thẻ HTML cần chèn CSS

Như trong ví dụ, mình sẽ chèn CSS vào thẻ HTML là <h2>

chen-css-vao-html1-min

4. Viết CSS

Viết CSS theo cú pháp: style=”color:red;font-size:16px;text-decoration:underline;”

Nhìn cú pháp, chắc bạn có thể hiểu được cách viết như nào rồi. Sau đó lưu lại bài viết và xem kết quả thôi.

chen-css-vao-html2-min

Chuyển qua Tab Trực quan, hoặc Lưu bài viết rồi xem, bạn sẽ thấy kết quả. Thẻ H2 đã được chuyển thành màu đỏ, với kích cỡ 16px và có gạch ngang phía dưới.

chen-css-vao-html3-min

Cách 2. Chèn Class CSS vào HTML

Nếu bạn cần CSS giống nhau cho nhiều chỗ, mà làm Cách 1 thì rất tốn thời gian, và cũng khó để quản lý.

1. Mở bài viết, trang cần chèn CSS

beaverhero.com-edit-post1-min

2. Đổi văn bản qua HTML

Bấm vào văn bản để đổi định dạng bài viết qua HTML (điều này không ảnh hưởng gì tới bài viết)

truc-quan-van-ban1-min

3. Tìm tới thẻ HTML cần chèn CSS Class

Như trong ví dụ, mình sẽ chèn CSS Class vào thẻ HTML là <h2>

chen-css-vao-html1-min

4. Chèn CSS Class

Bạn chèn theo cú pháp: class=”ten-class”

Như trong hình mình chèn class the-h2 vào trong thẻ H2

chen-css-class-html1-min

5. Viết CSS

Truy cập vào Giao diện > Tùy chỉnh (hoặc Tùy biến)

giao-dien-tuy-bien1-min

Tìm tới CSS bổ sung (Custom CSS, hoặc Additional CSS)

css-tuy-chinh

và viết CSS cho class the-h2

chen-css-class-html2-min

Và bấm Đăng để lưu CSS thôi 🙂 Nếu nó không chạy thì hãy xóa cache web và cache trình duyệt. Nếu xóa rồi vẫn không chạy thì thêm !important vào phía sau, để đưa nó có độ ưu tiên cao hơn trong CSS nhé.

Tham khảo thêm khóa học HTML – CSS 🙂