Dasar Tipografi

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 30 dari 76.

Tantangan

Mudah

Dalam proyek ini, kamu akan menerapkan keterampilan CSS yang sudah kamu pelajari untuk membuat dan menata menu kafe. Kamu akan berlatih menata teks dengan berbagai font, ukuran, dan perataan. Kamu juga akan menyempurnakan desain dengan menerapkan warna latar belakang dan teks agar menu terlihat menarik.

Dalam proyek ini, kita menggunakan file CSS eksternal untuk menata dokumen HTML. Kamu bisa melihat dua file: file HTML dan file CSS tertaut yang sudah dihubungkan untukmu.

Dalam tugas ini, kamu akan menerapkan gaya untuk mengubah keluarga font dan perataan teks.

Ikuti langkah-langkah berikut:

Terapkan font-family Tahoma, Geneva, sans-serif ke seluruh halaman dengan menargetkan elemen <body>.
Atur text-align: center; untuk elemen <h1> agar judul rata tengah.
Atur text-align: center; untuk elemen <p> dengan class welcome agar teks pengantar rata tengah.

Coba sendiri

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