Typografie-Grundlagen

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 30 von 76.

Aufgabe

Einfach

In diesem Projekt wirst du die CSS-Kenntnisse, die du bereits erlernt hast, anwenden, um ein Café-Menü zu erstellen und zu gestalten. Du wirst üben, den Text mit verschiedenen Schriftarten, Größen und Ausrichtungen zu formatieren. Außerdem wirst du das Design verbessern, indem du Hintergrund- und Textfarben anwendest, um ein visuell ansprechendes Menü zu erstellen.

In diesem Projekt verwenden wir eine externe CSS-Datei, um das HTML-Dokument zu gestalten; du kannst zwei Dateien sehen: die HTML-Datei und die verknüpfte CSS-Datei, die bereits für dich verbunden wurde.

In dieser Aufgabe wirst du Stile anwenden, um die Schriftfamilie und die Textausrichtung zu ändern.

Folge den unten stehenden Schritten:

Wende die font-family Tahoma, Geneva, sans-serif auf die gesamte Seite an, indem du das <body>-Element ansprichst.
Setze text-align: center; für das <h1>-Element, um den Titel mittig auszurichten.
Setze text-align: center; für das <p>-Element mit der Klasse welcome, um den Einleitungstext mittig auszurichten.

Probier es selbst

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