Warna dan Latar Belakang
Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 32 dari 76.
Tantangan
MudahDalam tantangan ini, kamu akan menyesuaikan warna latar belakang berbagai bagian menu kafe. Gunakan kreativitasmu untuk memilih warna yang membuat menu tampak menarik!
Ikuti langkah-langkah berikut:
- Terapkan warna latar belakang pada seluruh halaman (
body). Pilih warna apa pun yang sesuai dengan tema kafe. - Terapkan warna latar belakang dan warna teks pada footer (
footer) yang melengkapi desain halaman secara keseluruhan. - Kamu bebas mengubah warna elemen lain untuk memperindah gaya.
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>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>Semua pelajaran di Menata dengan CSS
5Warna dan Latar Belakang
Warna Latar BelakangWarna HEXWarna RGBTransparansi dengan RGBATantangan Rangkuman #13Selektor Dasar
Pengantar SelektorSelektor TipeSelektor classSelektor IDSelektor GrupSelektor UniversalTantangan Seleksi9Flexbox
Apa itu Flexbox?Arah FlexJustify ContentAlign ItemsTitik Tengah yang SempurnaTantangan Flexbox12Dasar-Dasar Desain Responsif
Apa Itu Desain Responsif?Tag Meta ViewportTata Letak FluidaUnit ViewportDasar-Dasar Media QueriesGambar FleksibelLatihan sendiri: Playground Web