Khóa học Lập trình miễn phí

Design System với CSS Variables

Lập trình

Mô tả: Tạo design system sử dụng CSS custom properties

Hướng dẫn

Lời giải

Tạo design system với: - CSS variables cho colors, typography, spacing - Component styles sử dụng variables - Dark/light theme switching - Consistent design tokens

Code mẫu

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      /* Viết CSS variables của bạn ở đây */
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <div class="card">Card Component</div>
  </div>
</body>
</html>

Thông tin bài tập

Khóa học: HTML & CSS Nâng cao

Bài học: CSS Variables & Custom Properties

Loại bài tập: Lập trình

Độ khó: Trung cấp

Thời lượng: 45 phút