Fundamentos de Tipografia

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 30 de 76.

Desafio

Fácil

Neste projeto, você aplicará as habilidades de CSS que já aprendeu para criar e estilizar um menu de café. Você praticará a estilização do texto com diferentes fontes, tamanhos e alinhamentos. Você também aprimorará o design aplicando cores de fundo e de texto para criar um menu visualmente atraente.

Neste projeto, usamos um arquivo CSS externo para estilizar o documento HTML; você pode ver dois arquivos: o arquivo HTML e o arquivo CSS vinculado, que já foi conectado para você.

Nesta tarefa, você aplicará estilos para alterar a família da fonte e o alinhamento do texto.

Siga as etapas abaixo:

Aplique a font-family Tahoma, Geneva, sans-serif a toda a página selecionando o elemento <body>.
Defina o text-align: center; para o elemento <h1> para alinhar o título ao centro.
Defina o text-align: center; para o elemento <p> com a classe welcome para alinhar ao centro o texto introdutório.

Experimente você mesmo

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