Cách tạo chữ đậm trong CSS – WordPress

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

Để tạo chữ đậm trong WordPress, bạn chỉ cần bấm vào biểu tượng B khi viết bài.

tao-chu-dam-1-min

Tuy nhiên, nếu bạn muốn tạo chữ đậm trong CSS, thì tham khảo hướng dẫn sau nhé.

Cách 1. Sử dụng HTML

1. Mở bài viết, trang cần tạo chữ đậm

beaverhero.com-edit-post1-min

2. Sửa HTML

Tiến hành đổi đoạn văn chứa từ cần sửa qua HTML bằng cách bấm Edit as HTML

css-chu-dam-wordpress1-min

3. CSS chữ đậm

Cho từ/cụm từ cần in đậm vào cặp thẻ <strong> từ, cụm từ cần in đậm </strong>

<strong> từ, cụm từ cần in đậm</strong>

css-chu-dam-wordpress2-min

Lưu ý là không dùng thẻ <b>, trong HTML5, thẻ <b> đã được thay thế bằng <strong>, và <strong> là thẻ có ngữ nghĩa, tốt hơn thẻ <b>

4. Chuyển về văn bản gốc

Sau khi thêm xong, hãy chuyển HTML về định dạng gốc để tiếp tục viết hoặc sửa bài nhé 🙂

css-chu-dam-wordpress3-min

và kết quả, từ đã được in đậm, như ví dụ này là từ WordPress

css-chu-dam-wordpress4-min

Cách 2. Sử dụng CSS

1. Mở bài viết, trang cần tạo chữ đậm

beaverhero.com-edit-post1-min

2. Sửa HTML

Tiến hành đổi đoạn văn chứa từ cần sửa qua HTML bằng cách bấm Edit as HTML

css-chu-dam-wordpress1-min

3. Chèn CSS chữ đậm

Thêm cặp thẻ <span></span> vào quanh từ hoặc cụm từ cần in đậm. Sau đó viết thêm style=”font-weight:bold;” trong thẻ mở <span>, như hình bên dưới.

css-chu-dam-wordpress5-min

span được dùng để tách cụm từ cần in đậm ra khỏi các đoạn khác.

4. Chuyển về văn bản gốc

Sau khi thêm xong, hãy chuyển HTML về định dạng gốc để tiếp tục viết hoặc sửa bài nhé 🙂

css-chu-dam-wordpress6-min

và kết quả, từ đã được in đậm, như ví dụ này là từ WordPress

css-chu-dam-wordpress4-min

Cách 3. Sử dụng CSS Class

Cách này được sử dụng khi bạn muốn in đậm nhiều cụm từ, từ ở nhiều vị trí trên website, mà không muốn mất thời gian khai báo như cách 2.

1. Mở bài viết, trang cần tạo chữ đậm

beaverhero.com-edit-post1-min

2. Sửa HTML

Tiến hành đổi đoạn văn chứa từ cần sửa qua HTML bằng cách bấm Edit as HTML

css-chu-dam-wordpress1-min

3. Chèn CSS Class

Thêm cặp thẻ <span></span> vào quanh từ hoặc cụm từ cần in đậm. Sau đó viết thêm class=”kl-bold” trong thẻ mở <span>, như hình bên dưới.

css-chu-dam-wordpress7-min

4. Chuyển về văn bản gốc

Sau khi thêm xong, hãy chuyển HTML về định dạng gốc để tiếp tục viết hoặc sửa bài nhé 🙂

css-chu-dam-wordpress6-min

5. Truy cập Giao diện > Tùy chỉnh (Tùy biến) > CSS bổ sung

giao-dien-tuy-bien1-min

css-tuy-chinh

Thêm CSS sau để in đậm từ

.kl-bold {
font-weight: bold;
}

css-chu-dam-wordpress8-min

Bấm Đăng và lưu lại bài viết.

Vậy là xong. Trên đây là 3 cách in đậm trong CSS. Nếu có vấn đề, bạn chỉ cần bình luận bên dưới.

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