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>