Biến CSS

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 2 trên 35.

Biến CSS, còn gọi là thuộc tính tùy chỉnh, cho phép bạn lưu giá trị dưới một tên rồi dùng lại trong toàn bộ CSS của mình.
Bạn khai báo biến bên trong một bộ chọn, thường là :root để biến hoạt động trên toàn bộ trang. Kiểu biến này gọi là toàn cục, bằng cú pháp sau:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

Để dùng giá trị được lưu trong biến, hãy dùng hàm var():

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Thử thách

Dễ

Bạn có một trang web hiển thị một vài bộ phim đang chiếu tại rạp. Mỗi bộ phim có một nút Mua vé.

Nhiệm vụ của bạn:

Tạo một biến CSS có tên --main-color bên trong bộ chọn :root và đặt giá trị của biến là seagreen.
Dùng biến đó để đặt màu nền cho tất cả phần tử <button> trên trang.

Tự làm thử

<html>
<head>
    <title>How to declare a variable</title>
    <style>
        :root {
            --bg-color: #4c87f5;
             /* Write CSS rules here */
             
          }
        body {
            font-family: Arial, sans-serif;
            background: var(--bg-color);
            padding: 20px;
          }
        .movie {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
          }
        .movie h2 {
            margin: 0 0 10px;
          }
        .movie p {
            margin: 0 0 10px;
          }
        button {
            color: black;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
             /* Write CSS rules here */
            
          }
    </style>
</head>
<body>
    <h1>Today's Movies</h1>
    <div class="movie">
      <h2>Ocean Whispers</h2>
      <p>A sailor discovers a hidden island and the secrets of the sea.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Midnight Chase</h2>
      <p>A detective races against the clock to stop a mysterious heist.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Starlight Bakery</h2>
      <p>A warm comedy about friendship and following your dreams.</p>
      <button>Buy Ticket</button>
</div>
</body>
</html>