Typography Basics

Part of the Styling with CSS section of Coddy's HTML journey — lesson 30 of 76.

Challenge

Easy

In this project, you'll apply the CSS skills you've already learned to create and style a café menu. You'll practice styling the text with different fonts, sizes, and alignments. You'll also enhance the design by applying background and text colors to create a visually appealing menu.

In this project, we use an external CSS file to style the HTML document; you can see two files: the HTML file and the linked CSS file, which has already been connected for you.

In this task, you will apply styles to change the font family and the text alignment.

Follow the steps below:

Apply the font-family Tahoma, Geneva, sans-serif to the entire page by targeting the <body> element.
Set the text-align: center; for the <h1> element to center-align the title.
Set the text-align: center; for the <p> element with the class welcome to center-align the introductory text.

Try it yourself

<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>