Kiến thức cơ bản về kiểu chữ

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

Thử thách

Dễ

Trong dự án này, bạn sẽ áp dụng những kỹ năng CSS đã học để tạo và định dạng thực đơn quán cà phê. Bạn sẽ luyện tập định dạng văn bản bằng các phông chữ, cỡ chữ và cách căn lề khác nhau. Bạn cũng sẽ cải thiện thiết kế bằng cách áp dụng màu nền và màu chữ để tạo ra một thực đơn bắt mắt.

Trong dự án này, chúng ta dùng một tệp CSS bên ngoài để định dạng tài liệu HTML. Bạn sẽ thấy hai tệp: tệp HTML và tệp CSS được liên kết, đã được kết nối sẵn.

Trong nhiệm vụ này, bạn sẽ áp dụng kiểu định dạng để thay đổi họ phông chữ và cách căn lề văn bản.

Hãy làm theo các bước dưới đây:

Áp dụng họ phông chữ Tahoma, Geneva, sans-serif cho toàn bộ trang bằng cách chọn phần tử <body>.
Đặt text-align: center; cho phần tử <h1> để căn giữa tiêu đề.
Đặt text-align: center; cho phần tử <p> có lớp welcome để căn giữa phần văn bản giới thiệu.

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>