Learn Basic CSS by building Cafe Menu | Freecodecamp.org

Langkah 1
Seperti yang Anda pelajari di beberapa langkah terakhir Aplikasi Foto Kucing, ada struktur dasar yang diperlukan untuk mulai membangun halaman web Anda.
Tambahkan tag <!DOCTYPE html>, dan elemen html dengan atribut lang en.

<!DOCTYPE html>
<html lang="en"></html>

Langkah 2
Tambahkan elemen kepala di dalam elemen html, sehingga Anda dapat menambahkan elemen judul. Teks elemen judul harus Menu Kafe.

Cafe Menu

<head> 
    <title>Cafe Menu</title>
</head>

Langkah 3
Judul adalah salah satu dari beberapa elemen yang memberikan informasi tambahan yang tidak terlihat di halaman web, tetapi berguna untuk mesin telusur atau cara halaman ditampilkan.
Di dalam elemen head, sarangkan elemen meta dengan atribut bernama charset yang disetel ke nilai utf-8 untuk memberi tahu browser cara menyandikan karakter halaman. Perhatikan bahwa elemen meta menutup sendiri.

 <head>
    <meta charset="utf-8">
    <title>Cafe Menu</title>
 </head>

Langkah 4
Untuk bersiap membuat beberapa konten sebenarnya, tambahkan elemen body di bawah elemen head.

 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>

  <body>
  </body>

Langkah 5
Saatnya menambahkan beberapa konten menu. Tambahkan elemen utama di dalam elemen tubuh yang ada. Ini pada akhirnya akan berisi informasi harga tentang kopi dan makanan penutup yang ditawarkan oleh kafe.

<body>
    <main>
    </main>
  </body>

Langkah 6
Nama kafenya adalah CAMPER CAFE. Tambahkan elemen h1 di dalam elemen utama Anda. Beri nama kafe dengan huruf kapital agar menonjol.

  <main>
     <h1>CAMPER CAFE</h1>
  </main>

Langkah 7
Untuk memberi tahu pengunjung bahwa kafe didirikan pada tahun 2020, tambahkan elemen p di bawah elemen h1 dengan teks Est. 2020.

  <h1>CAMPER CAFE</h1>
  <p>Est. 2020</p>

Langkah 8
Akan ada dua bagian pada menu, satu untuk kopi dan satu lagi untuk pencuci mulut. Tambahkan elemen bagian (section) di dalam elemen utama sehingga Anda memiliki tempat untuk meletakkan semua kopi yang tersedia.

<main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section></section>
</main>

Langkah 9
Buat elemen h2 di elemen section dan beri teks Kopi.

<section>
   <h2>Coffee</h2>
</section>

Langkah 10
Sampai saat ini, Anda masih terbatas dalam hal penyajian dan tampilan konten yang Anda buat. Untuk mulai mengambil kendali, tambahkan elemen gaya di dalam elemen kepala.

<head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style></style>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
 

Langkah 11
Anda dapat menambahkan gaya ke elemen dengan menentukannya di
elemen gaya dan menyetel properti untuknya seperti ini:
 
element {
   properti: nilai;
}

Pusatkan elemen h1 Anda dengan menyetel properti perataan teks ke
pusat nilai.

 <style>
      h1{
        text-align:center;
      }
    </style>

Langkah 12
Pada langkah sebelumnya, Anda menggunakan pemilih tipe untuk memberi gaya pada elemen h1. Pusatkan elemen h2 dan p dengan menambahkan pemilih tipe baru untuk masing-masing elemen gaya yang ada.

 <style>
      h1 {
        text-align: center;
      }
      h2{
        text-align: center;
      }
      p{
        text-align: center;
      }
    </style>
 
Langkah 13
Anda sekarang memiliki tiga pemilih tipe dengan gaya yang sama 
persis. 
Anda dapat menambahkan grup gaya yang sama ke banyak elemen 
dengan membuat daftar pemilih. Setiap pemilih dipisahkan dengan
koma seperti ini:

pemilih1, pemilih2 {
   nilai properti;
}

Hapus tiga pemilih tipe yang ada dan ganti dengan satu daftar 
pemilih yang memusatkan teks untuk elemen h1, h2, dan p.
 
<style>
      h1, h2, p {
        text-align: center;
      }
      
    </style>
 
Langkah 14
Anda telah menata tiga elemen dengan menulis CSS di dalam tag style.
Ini berfungsi, tetapi karena akan ada lebih banyak gaya, yang terbaik
adalah meletakkan semua gaya dalam file terpisah dan menautkannya.
Kami telah membuat file styles.css terpisah untuk Anda dan  
mengalihkan tampilan editor ke file tersebut. Anda dapat mengubah
antar file dengan tab di bagian atas editor.
Mulailah dengan menulis ulang gaya yang telah Anda buat ke dalam
file styles.css. Pastikan untuk mengecualikan tag gaya pembuka dan
penutup.
 
Styles.css
 
h1,h2,p{
  text-align:center;
}
 
Langkah 15
Sekarang Anda memiliki CSS di file styles.css, lanjutkan dan hapus
elemen style dan semua kontennya. Setelah dihapus, teks yang berada
di tengah akan bergeser kembali ke kiri.
 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
</head>
 

Langkah 16
Sekarang Anda perlu menautkan file styles.css sehingga gaya akan
diterapkan lagi. Sarang elemen tautan yang menutup sendiri di 
elemen kepala. Berikan stylesheet nilai atribut rel dan nilai 
atribut href dari styles.css.
 
<head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <link rel="stylesheet" href="styles.css">
  </head>
 

Langkah 17
Agar gaya halaman terlihat serupa di seluler seperti di desktop atau
 laptop, Anda perlu menambahkan elemen meta dengan atribut konten 
khusus.
Tambahkan yang berikut di dalam elemen kepala:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0" />
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
Langkah 18
Teks dipusatkan lagi sehingga tautan ke file CSS berfungsi.
Tambahkan gaya lain ke file yang mengubah properti background-color
menjadi coklat untuk elemen body.


h1, h2, p {
  text-align: center;
}

body{
  background-color:brown;
}
 
Langkah 19 
Latar belakang coklat itu membuat sulit untuk membaca teks.
Ubah warna latar belakang elemen body menjadi burlywood sehingga
memiliki beberapa warna tetapi Anda masih dapat membaca teksnya.
 
body {
  background-color: burlywood;
}
 

Langkah 20
Elemen div digunakan terutama untuk tujuan tata letak desain, tidak
seperti elemen konten lain yang telah Anda gunakan sejauh ini. 
Tambahkan elemen div di dalam elemen body dan kemudian pindahkan
semua elemen lainnya di dalam div baru.
 
<body>
    <div>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
    </div>
  </body>
 

Langkah 21
Tujuannya sekarang adalah membuat div tidak memenuhi seluruh lebar 
halaman. Properti lebar CSS sangat cocok untuk ini.
Buat pemilih tipe baru di style sheet yang memberi lebar elemen div 
Anda 300px.
 
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}

div{
  width:300px;
}

Langkah 22
Komentar dalam CSS terlihat seperti ini:

/* komentar di sini */

Di lembar gaya Anda, beri komentar pada baris yang berisi properti
dan nilai background-color, sehingga Anda dapat melihat efek dari 
elemen div gaya saja. Ini akan membuat latar belakang menjadi
putih lagi.
 
body {
  /*
  background-color: burlywood;
  */
}
 

Langkah 23
Sekarang gunakan pemilih div yang ada untuk menyetel warna latar
 belakang elemen div menjadi burlywood.
 div {
  width: 300px;
  background-color:burlywood;
}
 

Langkah 24
Sekarang mudah untuk melihat bahwa teks dipusatkan di dalam elemen 
div. Saat ini, lebar elemen div ditentukan dalam piksel (px).
Ubah nilai properti width menjadi 80%, untuk membuatnya menjadi 80%
dari lebar elemen induknya (body).
 
div {
  width: 80%;
  background-color: burlywood;
}
 

Langkah 25
Selanjutnya, Anda ingin memusatkan div secara horizontal. 
Anda dapat melakukannya dengan menyetel properti margin-left dan 
margin-right menjadi otomatis. Pikirkan margin sebagai ruang tak terlihat
di sekitar elemen. Dengan menggunakan dua properti margin ini, 
pusatkan elemen div di dalam elemen body.
 
div {
  width: 80%;
  background-color: burlywood;
  margin-left:auto;
  margin-right:auto;
}
 
 

Langkah 26

Sejauh ini Anda telah menggunakan pemilih tipe untuk menata elemen.
Pemilih kelas ditentukan oleh nama dengan titik tepat di depannya, 
seperti ini:

.nama kelas {
   gaya
}

Ubah pemilih div yang ada menjadi pemilih kelas dengan mengganti div
dengan menu bernama kelas.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}
 

Langkah 27
Untuk menerapkan gaya kelas ke elemen div, tambahkan atribut class
ke tag pembuka elemen div dan atur nilainya ke menu.
 
   <div class="menu">
Langkah 28

Karena produk utama kafe yang dijual adalah kopi, Anda dapat 
menggunakan gambar biji kopi sebagai latar belakang halaman.
Hapus komentar dan isinya di dalam pemilih tipe tubuh.
 Sekarang tambahkan properti gambar latar belakang dan atur nilainya
 ke url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg).


body {
 
  background-image: 
url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  
}
 

Langkah 29
Kelihatannya bagus.
Saatnya untuk mulai menambahkan beberapa item menu.
Tambahkan elemen artikel kosong di bawah judul Kopi.
Ini akan berisi rasa dan harga dari setiap kopi yang Anda tawarkan
saat ini.

<h2>Coffee</h2>
<article></article>
 

Langkah 30
elemen artikel biasanya berisi banyak elemen yang memiliki informasi
terkait. Dalam hal ini, itu akan mengandung rasa kopi dan harga 
untuk rasa itu. Sarang dua elemen p di dalam elemen artikel Anda.
Teks yang pertama harus French Vanilla, dan teks yang kedua 3.00.
 <article>
    <p>French Vanilla</p>
    <p>3.00</p>
 </article>
 


Langkah 31

Mulai di bawah pasangan kopi/harga yang ada, tambahkan kopi dan
harga berikut menggunakan elemen artikel dengan dua elemen
p bersarang di dalamnya.
Seperti sebelumnya, teks elemen p pertama harus berisi rasa kopi 
dan teks elemen p kedua harus berisi harga.

Caramel Macchiato 3.75
Pumpkin spice 3.50
Hazelnut 4.00
Mocha 4.50
 
<article>
   <p>French Vanilla</p>
   <p>3.00</p>
</article>
 
<article>
  <p>Caramel Macchiato</p>
  <p>3.75</p>
</article>
 
<article>
  <p>Pumpkin Spice/p>
  <p>3.50</p>
</article>
 
<article>
 <p>Hazelnut</p>
 <p>4.00</p>
</article>
 
<article>
 <p>Mocha</p>
 <p>4.50</p>
</article>

Langkah 32
Rasa dan harga saat ini ditumpuk satu sama lain dan dipusatkan
dengan elemen p masing-masing. Alangkah baiknya jika rasa di 
sebelah kiri dan harga di sebelah kanan.
Tambahkan class dengan nama flavor ke elemen p French Vanilla .
 
<p class="flavor">French Vanilla</p>
<p>3.00</p>
 

Langkah 33
Menggunakan class flavor yang baru saja dibuat, gunakan sebagai 
selector, atur nilai properti perataan teks ke kiri.
 
.flavor{
  text-align:left;
}

Langkah 34
Selanjutnya, Anda ingin menyelaraskan harga ke kanan.
Tambahkan kelas bernama harga ke elemen p Anda yang memiliki 3.00
sebagai teksnya.
 <p class="price">3.00</p>

Langkah 35
Sekarang sejajarkan teks ke kanan untuk elemen dengan kelas harga.
 
.price{
  text-align:right;
}


Langkah 36
Itulah yang Anda inginkan, tetapi sekarang alangkah baiknya jika
rasa dan harganya berada di jalur yang sama. elemen p adalah 
elemen tingkat blok, sehingga mengambil seluruh lebar elemen 
induknya.
Untuk mendapatkan mereka di baris yang sama, 
Anda perlu menerapkan beberapa gaya ke elemen p, sehingga mereka 
berperilaku lebih seperti elemen sebaris. Tambahkan atribut kelas
dengan item nilai ke elemen artikel pertama di bawah judul Kopi.
 
 <h2>Coffee</h2>
 <article class="item">
      <p class="flavor">French Vanilla</p>
      <p class="price">3.00</p>
 </article>

Langkah 37
Elemen p bersarang di elemen artikel dengan atribut kelas item.
Anda bisa menata semua elemen p yang bersarang di mana saja dalam 
elemen dengan kelas bernama item seperti ini:

.item p { }

Menggunakan pemilih di atas, tambahkan properti display dengan 
nilai inline-block sehingga elemen p berperilaku lebih seperti 
elemen inline.
 
.item p{
  display:inline-block;
}
 


Langkah 38
Hampir sesuai keinginan, tetapi harganya tidak tetap di sebelah kanan.
Ini karena elemen inline-block hanya mengambil lebar kontennya. 
Untuk menyebarkannya, tambahkan properti lebar ke selector class flavor
dan price yang memiliki nilai masing-masing 50%.
 
.flavor {
  text-align: left;
  width:50%;
}

.price {
  text-align: right;
  width:50%;
}


Langkah 39
Itu tidak berhasil.
Menata elemen p sebagai blok-sebaris dan menempatkannya pada baris
terpisah dalam kode menciptakan ruang ekstra di sebelah kanan
elemen p pertama, menyebabkan elemen kedua bergeser ke baris 
berikutnya. 
Salah satu cara untuk memperbaikinya adalah dengan membuat lebar
setiap elemen p sedikit kurang dari 50%.

Ubah nilai lebar menjadi 49% untuk setiap kelas untuk melihat
apa yang terjadi.
 
.flavor {
  text-align: left;
  width: 49%;
}

.price {
  text-align: right;
  width: 49%;
}


Langkah 40
Itu berhasil, tetapi masih ada sedikit ruang di sebelah kanan harga.
Anda dapat terus mencoba berbagai persentase untuk lebarnya.
Alih-alih, gunakan tombol back space pada keyboard Anda untuk 
memindahkan elemen p dengan harga kelas di sebelah elemen p dengan
ragam kelas sehingga berada di baris yang sama di editor. 
Pastikan tidak ada ruang di antara mereka.
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
Langkah 41
Sekarang lanjutkan dan ubah lebar kelas rasa dan harga menjadi 
50% lagi.
 
.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}
 


Langkah 42
Sekarang setelah Anda mengetahui bahwa ini berfungsi, Anda dapat
mengubah elemen artikel dan p yang tersisa agar sesuai dengan set
pertama. Mulailah dengan menambahkan item kelas ke elemen artikel
lainnya.
 
<article class="item">
       <p>Caramel Macchiato</p>
       <p>3.75</p>
</article>
 
<article class="item">
       <p>Pumpkin Spice</p>
       <p>3.50</p>
</article>
 
<article class="item">
       <p>Hazelnut</p>
       <p>4.00</p>
</article>
 
<article class="item">
       <p>Mocha</p>
       <p>4.50</p>
</article>


Langkah 43
Selanjutnya, posisikan elemen p lainnya agar berada pada garis yang 
sama tanpa spasi di antaranya.
 
<article class="item">
   <p>Caramel Macchiato</p><p>3.75</p>
</article>
 
<article class="item">
   <p>Pumpkin Spice</p><p>3.50</p>
</article>
 
<article class="item">
   <p>Hazelnut</p><p>4.00</p>
</article>
 
<article class="item">
   <p>Mocha</p><p>4.50</p>
</article>
Langkah 44
Untuk melengkapi gaya, tambahkan nama class flavor dan price yang
berlaku ke semua elemen p yang tersisa.
<article class="item">
  <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
 
<article class="item">
  <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
 
<article class="item">
  <p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
 
<article class="item">
  <p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
 

Langkah 45
Jika Anda membuat lebar pratinjau halaman lebih kecil, Anda akan
melihat di beberapa titik, beberapa teks di sebelah kiri mulai
melilit ke baris berikutnya. Ini karena lebar elemen p di sisi kiri
hanya dapat menempati 50% ruang.
Karena Anda tahu harga di sebelah kanan memiliki karakter yang jauh
lebih sedikit, ubah nilai lebar class flavor menjadi 75% dan nilai 
lebar class price menjadi 25%.

.flavor {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}
 
Langkah 46
Anda akan kembali menata menu dalam beberapa langkah, tetapi untuk 
saat ini, lanjutkan dan tambahkan elemen section kedua di bawah
yang pertama untuk menampilkan makanan penutup yang ditawarkan
oleh kafe.
 <section></section>
 

Langkah 47
Tambahkan elemen h2 di bagian baru dan beri teks Desserts.
 
<section>
   <h2>Desserts</h2>
</section>
Langkah 48
Tambahkan elemen artikel kosong di bawah tajuk Desserts.
Berikan atribut kelas dengan item nilai.


<h2>Desserts</h2>
    <article class="item"></article>
 

Langkah 49
Sarang dua elemen p di dalam elemen artikel Anda.
Teks yang pertama adalah Donut, dan teks yang kedua 1.50.
Letakkan keduanya pada baris yang sama untuk memastikan tidak ada
ruang di antara keduanya.
<article class="item">
    <p>Donut</p>
    <p>1.50</p>
    </article>
Langkah 50
Untuk dua elemen p yang baru saja Anda tambahkan, tambahkan 
dessert sebagai nilai atribut kelas elemen p pertama dan
price nilai sebagai atribut kelas elemen p kedua.

 <p class="dessert">Donut</p><p class="price">1.50</p>
 

Langkah 51
Ada yang tidak beres. Anda menambahkan nilai atribut kelas yang 
benar ke elemen p dengan Donat sebagai teksnya, tetapi Anda belum
menentukan pemilih untuknya.
Aturan CSS untuk class flavor sudah menetapkan properti yang Anda 
inginkan.
Tambahkan class dessert sebagai pemilih tambahan untuk
aturan CSS ini.

.dessert, .flavor {
  text-align: left;
  width: 75%;
}


Langkah 52
Di bawah makanan penutup yang baru saja Anda tambahkan,
tambahkan sisa makanan penutup dan harga menggunakan tiga elemen
artikel lagi, masing-masing dengan dua elemen p bersarang. 
Setiap elemen harus memiliki makanan penutup dan teks harga yang
benar, dan semuanya harus memiliki kelas yang benar.
Cherry Pie 2.75
Cheesecake 3.00
Cinnamon Roll 2.50 <article class="item">
     <p class="dessert">Donut</p><p class="price">1.50</p>
</article>
 
<article class="item">
     <p class="dessert">Cheery Pie</p><p class="price">2.75</p>
</article>
 
<article class="item">
     <p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
 
<article class="item">
     <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
 

Langkah 53
Anda dapat memberi menu Anda ruang antara konten dan sisi dengan
berbagai properti padding.
Beri kelas menu padding-left dan padding-right dengan nilai yang sama
20px.
 
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
 

Langkah 54
Itu terlihat lebih baik. Sekarang coba tambahkan padding 20px yang
sama ke bagian atas dan bawah menu.
 
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
 
 

Langkah 55
Karena keempat sisi menu memiliki spasi internal yang sama, lanjutkan 
dan hapus empat properti dan gunakan satu properti padding dengan
nilai 20px.
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  
}
 

Langkah 56
Lebar menu saat ini akan selalu mengambil 80% dari lebar elemen 
body. Di layar yang sangat lebar, kopi dan hidangan penutup tampak
jauh dari harganya.
Tambahkan properti max-width ke kelas menu dengan nilai 500px
untuk mencegahnya tumbuh terlalu lebar.
 
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
 

Langkah 57
Anda dapat mengubah font-family teks, agar terlihat berbeda dari font 
default browser Anda. Setiap browser memiliki beberapa font umum 
yang tersedia untuk itu.
Ubah semua teks di badan Anda (body), dengan menambahkan properti 
font-family dengan nilai sans-serif. Ini adalah font yang cukup umum 
yang sangat mudah dibaca.

body {
  background-image: 
 url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}


Langkah 58
Agak membosankan untuk semua teks memiliki font-family yang sama.
Anda masih dapat memiliki sebagian besar teks sans-serif dan hanya
membuat elemen h1 dan h2 berbeda menggunakan pemilih yang berbeda.
Beri gaya pada elemen h1 dan h2 sehingga hanya teks elemen ini yang
menggunakan font Impact.
 
h1, h2{
  font-family: Impact;
}



h1, h2 {
  font-family: Impact, serif;
}
 

.established{
  font-style: italic;
}
 
Langkah 61
Sekarang terapkan kelas yang sudah ada ke Est. teks 2020.
 <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
 

Langkah 62
Tipografi elemen tajuk (mis. h1, h2) diatur oleh nilai default 
browser pengguna.
Tambahkan dua pemilih tipe baru (h1 dan h2). 
Gunakan properti font-size untuk keduanya, tetapi gunakan
nilai 40px untuk h1 dan 30px untuk h2.


h1{
font-size: 40px;
}
h2{
font-size: 30px;
}


Langkah 63
Tambahkan elemen footer di bawah elemen utama, tempat Anda dapat
menambahkan beberapa informasi tambahan.
 
<footer></footer>
 

Langkah 64
Di dalam footer, tambahkan elemen p. Kemudian, sarangkan elemen 
jangkar (a) di p yang tertaut ke
https://www.freecodecamp.org dan memiliki teks Kunjungi situs web
kami.
<footer>
   <p><a href="https://www.freecodecamp.org">Visit our website</a>
</p>
</footer>

Langkah 65
Tambahkan elemen p kedua di bawah yang memiliki tautan dan berikan
teks 123 Free Code Camp Drive.
 
<p>
   <a href="https://www.freecodecamp.org" target="_blank"> 
           Visit our website</a>
</p>
        <p>123 Free Code Camp Drive</p>

Langkah 66
Anda dapat menggunakan elemen hr untuk menampilkan pemisah di 
antara bagian-bagian konten yang berbeda.
Pertama, tambahkan elemen hr antara elemen p dengan 
class="establisheddan elemen section pertama.
Perhatikan bahwa hr elemen  adalah elemen menutup sendiri.
 <main>
    <h1>CAMPER CAFE</h1>
    <p class="established">Est. 2020</p>
    <hr>
<section>


Langkah 67
Properti default elemen hr akan membuatnya tampak sebagai garis 
tipis berwarna abu-abu terang.
Anda dapat mengubah tinggi garis dengan menentukan nilai untuk 
properti ketinggian.
Ubah ketinggian elemen hr menjadi 3px.
hr{
  height: 3px;
}
 


Langkah 68
Ubah warna background elemen hr menjadi coklat agar sesuai dengan
warna biji kopi.
 
hr {
  height: 3px;
  background-color:brown;
}
 


Langkah 69
Perhatikan warna abu-abu di sepanjang tepi garis. 
Tepi-tepi itu dikenal sebagai batas. Setiap sisi elemen dapat 
memiliki warna yang berbeda atau semuanya bisa sama.
Buat semua tepi elemen hr dengan warna yang sama dengan
latar belakangnya menggunakan properti border-color.
 


Langkah 70
Perhatikan bagaimana ketebalan garis terlihat lebih besar?
Nilai default dari properti bernama border-width adalah 1px
untuk semua tepi elemen hr.
Dengan mengubah batas menjadi warna yang sama dengan
latar belakang, tinggi total garis adalah  5px
(3px ditambah lebar batas atas dan bawah 1px).
Ubah properti ketinggian hr menjadi 2px, sehingga tinggi totalnya
menjadi 4px.
 
hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}
 


Langkah 71
Lanjutkan dan tambahkan elemen hr lainnya di antara elemen utama
(main) dan elemen footer.
 </main>
      <hr>
 <footer>


Langkah 72
Untuk membuat lebih banyak ruang di sekitar menu, tambahkan 
ruang 20px di bagian dalam elemen body dengan menggunakan
properti padding.
 
body {
  background-image: 
 url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}
 


Langkah 73
Berfokus pada item menu dan harga, ada celah yang cukup besar 
di antara setiap baris.
Targetkan semua elemen p yang bersarang dalam elemen dengan 
nama kelas item dan atur margin atas dan bawahnya menjadi 5px.
 
.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  }
}


Langkah 74
Menggunakan pemilih gaya yang sama di langkah sebelumnya, 
buat ukuran font item dan harga lebih besar dengan menggunakan 
nilai 18px.
 
.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
 

Langkah 75
Mengubah margin-bottom menjadi 5px terlihat bagus. 
Namun, sekarang ruang antara item menu Cinnamon Roll dan 
elemen hr kedua tidak cocok dengan ruang antara elemen hr atas 
dan judul Kopi.
Tambahkan lebih banyak ruang dengan membuat kelas bernama
bottom-line menggunakan 25px untuk properti margin-top.
 
.bottom-line{
  margin-top: 25px;
}
 

Langkah 76
Sekarang tambahkan kelas bottom-line ke elemen hr kedua 
sehingga gaya diterapkan.
 
<hr class="bottom-line">

Langkah 77
Selanjutnya Anda akan menata elemen footer. 
Agar CSS tetap teratur, tambahkan komentar di akhir style.css
dengan teks FOOTER.
 
/*FOOTER*/
Langkah 78
Turun ke elemen footer, buat semua teks memiliki nilai 14px untuk 
ukuran font.


Langkah 79
Warna default dari tautan yang belum diklik biasanya berwarna biru.
Warna default dari sebuah link yang telah dikunjungi dari sebuah 
halaman biasanya berwarna ungu.
Untuk membuat tautan footer dengan warna yang sama terlepas 
dari apakah tautan telah dikunjungi, gunakan pemilih jenis untuk 
elemen jangkar (a) dan gunakan nilai hitam untuk properti warna.
 
a{
  color: black;
}
 

Langkah 80
Anda mengubah properti tautan ketika tautan benar-benar telah 
dikunjungi dengan menggunakan pemilih semu yang terlihat seperti
a:visited { propertyName: propertyValue; }.
Ubah warna footer link Visit website kami menjadi abu-abu ketika
user sudah mengunjungi link tersebut.

a:visited{
  color:grey;
}
 

Langkah 81
Anda mengubah properti tautan saat mouse mengarahkan mouse 
ke atasnya dengan menggunakan pemilih semu yang terlihat seperti
a:hover { propertyName: propertyValue; }.
Ubah warna footer Kunjungi tautan situs web kami menjadi coklat 
saat pengguna mengarahkan kursor ke atasnya.
 
a:hover{
  color:brown;
}
 
Langkah 82
Anda mengubah properti tautan saat tautan benar-benar diklik
dengan menggunakan pemilih semu yang terlihat seperti
a:aktif { namaproperti: nilainilaiproperti; }.
Ubah warna footer link website kami menjadi putih saat di klik.
 
 a:active{  color: white;
}
 

Langkah 83
Untuk mempertahankan tema warna yang sama yang telah Anda
gunakan (hitam dan coklat), ubah warna saat tautan dikunjungi 
menjadi hitam dan gunakan warna coklat saat tautan benar-benar
diklik.


a:visited {
  color:black;
}

a:hover {
  color: brown;
}

a:active {
  color:brown;
}
 

Langkah 84
Teks menu CAMPER CAFE memiliki ruang yang berbeda dari atas 
daripada ruang alamat di bagian bawah menu.
Ini karena browser memiliki margin atas default untuk elemen h1.
Ubah margin atas elemen h1 menjadi 0 untuk menghapus semua margin
atas.
h1 {
  font-size: 40px;
  margin:0;
}
Langkah 85
Untuk menghapus sebagian ruang vertikal antara elemen h1 dan
teks Est. 2020, ubah margin bawah h1 menjadi 15px.


h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}
 

Langkah 86
Sekarang jarak atas terlihat bagus. 
Ruang di bawah alamat di bagian bawah menu sedikit lebih besar
dari ruang di bagian atas menu dan elemen h1.
Untuk mengurangi ruang margin default di bawah elemen p alamat, 
buat pemilih kelas bernama alamat dan gunakan nilai 5px untuk 
properti margin-bottom.
 
.address{
  margin-bottom:5px;
}
Langkah 87
Sekarang terapkan kelas alamat ke elemen p yang berisi alamat 
jalan 123 Free Code Camp Drive.
 
<footer>
   <p>
     <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
   </p>
   <p class="address">123 Free Code Camp Drive</p>
</footer>
 

Langkah 88
Menu terlihat bagus, tetapi selain gambar latar biji kopi, sebagian besar
hanya berupa teks.
Di bawah judul Kopi, tambahkan gambar menggunakan 
url https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg.
Beri gambar nilai alt ikon kopi.
 

Langkah 89
Gambar yang Anda tambahkan tidak terpusat secara horizontal seperti
judul Kopi di atasnya. elemen img adalah elemen sebaris "seperti".
Untuk membuat gambar berperilaku seperti elemen heading
(yang merupakan level blok), buat pemilih tipe img dan gunakan
blok nilai untuk properti display dan gunakan nilai margin-left dan
margin-right yang berlaku untuk memusatkannya secara horizontal.

img{
  display:block;
  margin-left: center;
  margin-right: center;
}
 

Langkah 90
Tambahkan satu gambar terakhir di bawah tajuk Desserts
menggunakan url 
https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg. 
Beri gambar nilai alt pie icon.
 
<h2>Desserts</h2>
    <img 
 src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" 
 alt="pie icon">
 

 
Langkah 91
Alangkah baiknya jika ruang vertikal antara elemen h2 dan ikon
terkait lebih kecil. 
Elemen h2 memiliki ruang margin atas dan bawah default, sehingga Anda
dapat mengubah margin bawah elemen h2 menjadi 0 atau angka lain.
Ada cara yang lebih mudah, cukup tambahkan margin atas negatif
ke elemen img untuk menariknya dari posisinya saat ini.
Nilai negatif dibuat menggunakan - di depan nilai.
Untuk menyelesaikan proyek ini, lanjutkan dan gunakan margin atas
negatif 25px di pemilih jenis img.


img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:-25px;
}
 

 Full script HTML bisa didownload disini
 
Full script CSS bisa didownload disini 