Tạo kiểu văn bả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 31 trên 76.

Thử thách

Dễ

Trong thử thách này, bạn sẽ tùy chỉnh cỡ chữ, màu sắc và kiểu trang trí cho các phần tử khác nhau trên trang.

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

Đặt cỡ chữ của phần tử <h1> thành 36px và áp dụng kiểu trang trí underline.
Đặt độ đậm của phông chữ cho phần tử có lớp welcome thành 700.
Đặt cỡ chữ của các phần tử <h2> (tiêu đề danh mục) thành 24px, và đặt màu chữ thành màu bất kỳ bạn chọn (không phải màu đen).
Đặt màu chữ của các phần tử có lớp dish-name thành màu bất kỳ bạn chọn (không phải màu đen).

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>