Основы типографики

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 30 из 76.

Задание

Легко

В этом проекте вы примените уже изученные навыки CSS для создания и стилизации меню кафе. Вы попрактикуетесь в стилизации текста с использованием различных шрифтов, размеров и выравниваний. Вы также улучшите дизайн, применив цвета фона и текста для создания визуально привлекательного меню.

В этом проекте мы используем внешний файл CSS для стилизации HTML-документа; вы можете увидеть два файла: HTML-файл и связанный с ним CSS-файл, который уже был подключен для вас.

В этом задании вы примените стили для изменения семейства шрифтов и выравнивания текста.

Выполните следующие шаги:

Примените font-family Tahoma, Geneva, sans-serif ко всей странице, выбрав в качестве цели элемент <body>.
Установите text-align: center; для элемента <h1>, чтобы выровнять заголовок по центру.
Установите text-align: center; для элемента <p> с классом welcome, чтобы выровнять вступительный текст по центру.

Попробуйте сами

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