Latihan: Menulis Rules pada Berkas CSS

Belajar Dasar Pemrograman Web

Tools

Proyek Halaman Profil sudah siap untuk diterapkan styling guna mempercantik halamannya. Maka dari itu, kita perlu melanjutkan ke proses berikutnya. Yuk!

Tujuan

Direktori dan berkas styling telah kita siapkan. Kekurangan yang kita memiliki adalah belum menyediakan kode styling sama sekali padanya. Pada latihan ini, kita akan menuliskan kode styling dengan beragam CSS rule untuk Halaman Profil. Apakah masih ingat dengan materi sebelumnya? Kita akan menyusun CSS rule dengan beberapa komponen, seperti selector, declaration block, dan properti CSS beserta value-nya.

Lalu, bagaimana dengan hasilnya? Kita akan melihat hasil akhirnya berupa berkas style.css yang penuh dengan kode styling. Jadi, mari ikuti dengan baik latihan ini.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VS Code.
Menulis kode styling pada berkas CSS yang telah dibuat dalam latihan sebelumnya.
Mengubah penerapan styling pada selector h2 dan h3 agar menggunakan group selector.

Latihan Menulis Rules pada Berkas CSS

Berikut adalah daftar langkah yang perlu diikuti dan disimak agar latihan berjalan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VS Code.
Untuk latihan awal, kita akan menuliskan rule styling pada beberapa elemen HTML yang tersedia dalam Halaman Profil. Kita akan mengubah tipe font pada halaman ini.

Tetapkanlah tipe font ‘sans-serif’ sebagai font yang digunakan pada seluruh elemen dalam elemen <body>. Silakan buka berkas styles.css dan tuliskan kode berikut padanya.
```
body {
  font-family: sans-serif;
}
```
Untuk styling kedua, kita tetapkan juga warna pada setiap elemen <h2> dan <h3> dengan menuliskan kode sebagai berikut.
```
body {
  font-family: sans-serif;
}
 
h2 {
  color: #00a2c6;
}
 
h3 {
  color: #00a2c6;
}
```
Styling yang terakhir adalah memberikan warna background, warna teks, dan padding pada elemen <footer>. Silakan tambahkan kode berikut dalam style.css.
```
footer {
  padding: 20px;
  color: white;
  background-color: #00a2c6;
}
```

Jadi, keseluruhan kode pada berkas style.css akan tampak seperti berikut.

body {
  font-family: sans-serif;
}
 
h2 {
  color: #00a2c6;
}
 
h3 {
  color: #00A2C6;
}
 
footer {
  padding: 20px;
  color: white;
  background-color: #00a2c6;
}

Terakhir, apakah Anda melihat ada kesamaan styling dalam dua selector berdasarkan kode di atas? Benar, ada styling yang sama. Nah, dalam rangka meringkaskan kode, kita akan menggabungkannya dengan teknik yang bernama group selector.

Wah, apa itu group selector? Tenang, kita akan membahas teknik ini pada materi berikutnya. Tentunya masih dalam modul yang sama. So, silakan sesuaikan seluruh isi kodenya hingga menjadi seperti berikut.
```
body {
  font-family: sans-serif;
}
 
h2, h3 {
  color: #00a2c6;
}
 
footer {
  padding: 20px;
  color: white;
  background-color: #00a2c6;
}
```

Itulah latihan yang telah kita lakukan. Apakah Anda ingin menjalankan proyeknya? Silakan! Namun, halaman web ini belum terlihat perubahannya. Apakah ada yang tahu penyebabnya? Kita akan menemukan jawabannya pada latihan berikutnya.