Màu sắc và hình nền

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 32 trên 76.

Thử thách

Dễ

Trong thử thách này, bạn sẽ tùy chỉnh màu nền của các phần khác nhau trong thực đơn quán cà phê. Hãy thỏa sức sáng tạo và chọn màu sắc giúp thực đơn trông bắt mắt nhé!

Thực hiện các bước sau:

Đặt màu nền cho toàn bộ trang (body). Chọn màu phù hợp với chủ đề quán cà phê.
Đặt màu nền và màu chữ cho chân trang (footer) sao cho hài hòa với thiết kế tổng thể của trang.
Bạn có thể thay đổi màu của bất kỳ thành phần nào khác để làm phong phú thêm kiểu dáng.

Tự làm thử

<html>
<head>
    <title>Café Menu</title>  
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Delight</h1>
        <p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
    </header>
    <div class="menu-category">
        <h2>Appetizers</h2>
        <ul>
            <li>
                <p class="dish-name">Bruschetta $5.99</p>
            </li>
            <li>
                <p class="dish-name">Garlic Bread $3.50</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Main Courses</h2>
        <ul>
            <li>
                <p class="dish-name">Spaghetti Carbonara $12.99</p>
            </li>
            <li>
                <p class="dish-name">Grilled Chicken Salad $9.99</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Desserts</h2>
        <ul>
            <li>
                <p class="dish-name">Chocolate Cake $4.99</p>
            </li>
            <li>
                <p class="dish-name">Cheesecake $5.49</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>