Đổi màu chữ bằng CSS

Cho đến hiện tại thì website của bạn vẫn đang sử dụng thiết kế mặc định của trình duyệt, với chữ đen nền trắng trông thật đơn điệu. Trong khi ngoài kia bao la thế giới người ta “màu mè hoa lá hẹ” rần trời. Đó là do chúng ta chưa sử dụng CSS đó.

Trong bài học này:

CSS là gì?
Sử dụng CSS để thay đổi màu chữ

CSS là gì?

CSS là viết tắt của Cascading Style Sheets (dịch: Tập tin định kiểu theo tầng), được sử dụng để quy định phần giao diện của một website. CSS không chỉ cho phép bạn thay đổi màu, font hay kích thước chữ, mà còn có thể thay đổi bố cục của trang (layouting), giúp website của bạn hiển thị tốt nhất trên các màn hình có độ phân giải khác nhau. CSS còn có thể tạo ra các hiệu ứng chuyển động (animations) đẹp mắt hay thậm chí thay đổi giao diện của một số thẻ HTML.

Nếu xem HTML như phần khung thô của một căn nhà thì CSS giống như phần sơn phết cả bên ngoài lẫn bên trong vậy.

Tính chất “theo tầng” (cascading) của CSS có nghĩa là các định nghĩa CSS có thể bị ghi chồng lên nhau (overriding). Chúng ta sẽ nói rõ hơn trong những bài học sau.

Cú pháp CSS

Một định nghĩa CSS thường sẽ như thế này:

p {
  color: green;
  font-size: 18px;
}

Trong đó,

Phần chọn (selector): Quy định những phần tử HTML nào mà định nghĩa này sẽ áp dụng. Trong ví dụ trên p có nghĩa là “Chọn tất cả thẻ <p> trong trang”.
Các luật hay thuộc tính (rules or properties): Mô tả các thuộc tính hiển thị cho phần tử được chọn, có thể là màu chữ, kích thước font, màu nền, hay các quy định về bố cục trang, v.v. Các thuộc tính được viết theo cú pháp tên thuộc tính: giá trị;. Trong ví dụ trên, chúng ta có thuộc tính color quy định màu chữ và font-size quy định kích thước của chữ. Lưu ý là các thuộc tính phải được kết thúc bằng dấu chấm phẩy ;.

Sử dụng CSS trong HTML

Để áp dụng CSS vào trang, chúng ta sẽ sử dụng thẻ <style>. Nội dung bên trong thẻ <style> sẽ là các định nghĩa CSS. Ví dụ:

<style>
  p {
    color: green;
    font-size: 18px;
  }

  h1 {
    color: red;
  }
</style>

Thực hành

Giả sử chúng ta có tập tin index.html như thế này:

<h1>Trang của Cún</h1>

<h2>Giới thiệu</h2>

<p>Xin chào! Tui tên là Cún.</p>

<h2>Liên hệ</h2>

<p>
  Gửi email cho tui qua địa chỉ
  <a href="mailto:embegaugau@example.com">embegaugau@example.com</a>
</p>

Ở đầu tập tin, bạn thêm vào:

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

Kết quả:
Chúng ta có thể thử tăng kích thước chữ của thẻ <p> lên 18 pixels.
```
<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>
```
Kết quả:

Nói nhanh về màu sắc trong CSS

Bản đặc tả CSS quy định 16 màu được đặt tên theo tiếng Anh, bao gồm:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

Ngoài ra còn có 150 màu có tên khác để mô tả những sắc thái của cùng một màu chính, ví dụ như aliceblue hay cadetblue.

Với công nghệ màn hình hiện đại có thể hiển thị hơn 16 triệu màu khác nhau, việc đặt tên cho từng màu riêng biệt là hoàn toàn không thể. Do đó trong CSS hay máy tính nói chung, màu sắc còn được ký hiệu dưới dạng mã thập lục phân như #ff0099 hay rgb(255, 0, 153) hoặc hwb(12, 50%, 0%). Nếu bạn đã từng sử dụng qua các chương trình chỉnh sửa ảnh/ thiết kế như Adobe Photoshop hay Sketch/ Figma có thể bạn đã thấy qua các mã màu này.

Chúng ta sẽ nói thêm về màu sắc trong CSS ở bài học sau.

Bài tập

Bài 1

Sử dụng trang HTML ở trên, bạn hãy đổi các thẻ tiêu đề sang màu tím purple.

Click để xem lời giải

Bạn có thể sẽ viết như thế này:

h1 {
  color: purple;
}

h2 {
  color: purple;
}

Đối với những định nghĩa CSS giống nhau 100% nhưng chỉ khác phần chọn, chúng ta có thể kết hợp chúng lại:

h1,
h2 {
  color: purple;
}

Kết quả:

Bài 2

Bạn đã biết thuộc tính color giúp thay đổi màu của chữ, nhưng với màu nền thì sao? Thuộc tính background-color sẽ giúp bạn.

Ví dụ:

p {
  background-color: red;
  color: yellow;
}

Bài tập: Vẫn là trang HTML ở trên, hãy đổi màu của thẻ <p> thành chữ #ffff00 trên nền #da251d.

Click để xem lời giải

p {
  background-color: #da251d;
  color: #ffff00;
}