CSS: bajunya

Jujur aja, hasil Bab 3 tadi kurang sedap dipandang, kan? Latar putih, huruf kuno ala koran, kotak isian yang mepet-mepet, tombol abu-abu yang kayak lupa dikasih nyawa.

Bukan salahmu. Setiap browser punya “baju bawaan” yang sangat sederhana, dipakai kalau kita belum memberi instruksi dandanan apa pun. Di bab ini, kita ganti bajunya.

Alatnya bernama CSSCSSBahasa untuk mengatur tampilan halaman web, seperti warna, ukuran, dan jarak.Penjelasan lengkap →. Kalau HTML menentukan apa isinya, CSS menentukan seperti apa kelihatannya. Dan ini bab yang paling menyenangkan, karena setiap perubahan kecil langsung kelihatan hasilnya.

Rumus dasarnya cuma satu

Semua CSS ditulis dengan pola yang sama. Lihat contoh ini:

h1 {
  color: #e8590c;
}

Artinya: “Semua judul h1, warna tulisannya oranye.” Kita bedah satu-satu:

• h1 disebut selectorSelectorBagian CSS yang menunjuk elemen mana yang mau didandani, misalnya h1 atau .kartu.Penjelasan lengkap →. Ini jawaban atas pertanyaan “siapa yang mau didandani?”
• Tanda { } (kurung kurawal) membungkus semua perintah dandanan untuk si selector.
• color disebut propertiProperti (CSS)Hal yang mau diubah pada tampilan, seperti color untuk warna tulisan atau font-size untuk ukuran huruf.Penjelasan lengkap →, yaitu “apa yang mau diubah?”. Di sini warna tulisan.
• #e8590c adalah nilai, yaitu “diubah jadi apa?”. Di sini warna oranye.
• Titik dua : memisahkan properti dari nilainya, dan titik koma ; menandakan satu perintah selesai.

Bayangin kamu menitipkan pesan ke penjahit: “Untuk bajuku (selector), ubah warnanya (properti) jadi biru tua (nilai).” Susunan kalimatnya sama.

Lalu CSS ditulis di mana? Di dalam tag <style> yang ditaruh di <head>. Kotak latihan nanti sudah menyediakannya:

<style>
  body {
    font-family: sans-serif;
    background: #fff8e7;
  }
</style>

body adalah seluruh isi halaman. Jadi dua baris itu bilang: “Seluruh halaman, pakai jenis huruf polos (sans-serif), dan warna latarnya krem.” Itulah kenapa nanti halaman latihanmu sudah berwarna krem sejak awal.

Tulisan di antara /* dan */ adalah komentar di CSS. Seperti di HTML, browser mengabaikannya.

Warna, ukuran, dan jarak

Warna. Ada beberapa cara menulisnya. Yang paling gampang adalah memakai nama, misalnya white atau red. Cara kedua memakai kode seperti #e8590c, yaitu campuran merah, hijau, dan biru dalam bentuk angka dan huruf. Kamu nggak perlu paham cara hitungnya. Tinggal ketik “color picker” di Google, pilih warna yang kamu suka, lalu salin kodenya. Programmer pun begitu.

Ukuran. Ukuran huruf ditulis seperti font-size: 16px. Satuan pxPiksel (px)Titik terkecil di layar, dipakai sebagai satuan ukuran di CSS dan ditulis px.Penjelasan lengkap → artinya piksel, kira-kira satu titik di layar. Selain angka pasti, kamu juga bisa memakai persen: width: 100% artinya “selebar wadahnya”, sedangkan max-width: 400px artinya “lebarnya boleh melar, tapi jangan lebih dari 400 piksel”.

Jarak. Ada dua jenis, dan ini sering bikin pemula ketukar:

• PaddingPaddingJarak di dalam sebuah elemen, antara isinya dan tepinya.Penjelasan lengkap → adalah jarak di dalam elemen, antara isi dan tepinya.
• MarginMarginJarak di luar sebuah elemen, antara elemen itu dan tetangganya.Penjelasan lengkap → adalah jarak di luar elemen, antara dia dan tetangganya.

Tiga properti dandanan lain yang akan kamu pakai:

• border untuk garis tepi, misalnya border: 2px solid #ddd (tebal 2 piksel, garis penuh, abu-abu muda).
• border-radius untuk membulatkan sudut. Makin besar angkanya, makin bulat.
• box-shadow untuk bayangan tipis di bawah elemen supaya kelihatan “timbul”. Yang ini cukup disalin saja, nggak usah dihafal.

Class: dandanan untuk kelompok tertentu

Ada satu masalah. Kalau kamu menulis p { color: red; }, semua paragraf jadi merah. Padahal kadang kita cuma mau mendandani satu bagian saja.

Solusinya: beri nama kelompok. Nama itu disebut classClassNama kelompok yang bisa ditempelkan ke banyak elemen, supaya semuanya didandani sama oleh CSS.Penjelasan lengkap →. Di HTML kamu tulis seperti ini:

<div class="kartu">
  ...isi kartu...
</div>

<div> adalah tag pembungkus kosong, semacam kardus tanpa gambar yang kita pakai untuk mengelompokkan beberapa elemen. Di dalam div ini ada seluruh isi aplikasi uang jajan, dan kita namai kelompoknya kartu.

Di CSS, class ditunjuk dengan titik di depan namanya:

.kartu {
  background: white;
  padding: 20px;
  border-radius: 16px;
}

Artinya: “Semua yang berclass kartu: latar putih, ada jarak 20 piksel di dalamnya, dan sudutnya bulat.”

Kamu mungkin ingat id dari Bab 3. Bedanya, id itu unik (satu halaman, satu elemen), sedangkan class boleh dipakai banyak elemen sekaligus, seperti seragam kelas. Elemen <p id="total" class="total"> di latihan punya keduanya: id untuk dipanggil JavaScript nanti, class untuk didandani CSS. Nggak masalah, malah wajar.

Coba sendiri: dandani kartu uang jajan

Kerangka dari Bab 3 sudah dibungkus div ber-class kartu, dan CSS-nya sudah menyiapkan body dengan latar krem. Tugasmu: mengisi bagian komentar Tantangan di dalam <style>.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Uang Jajanku</title>
  <style>
    body {
      font-family: sans-serif;
      background: #fff8e7;
    }

    /* Tantangan: percantik kartu, judul, kotak isian, dan tombolnya */

  </style>
</head>
<body>
  <div class="kartu">
    <h1>Uang Jajanku</h1>
    <p>Catat setiap kali kamu jajan.</p>

    <label for="nama">Jajan apa?</label>
    <input id="nama" type="text" placeholder="contoh: Bakso">

    <label for="harga">Harganya berapa?</label>
    <input id="harga" type="number" placeholder="contoh: 15000">

    <button id="tombol-tambah">Tambah</button>

    <p id="total" class="total">Total: Rp 0</p>
  </div>
</body>
</html>

Urutan yang disarankan, satu per satu biar kelihatan efek tiap barisnya:

1. Dandani .kartu: beri background: white;, padding: 20px;, dan border-radius: 16px;. Tambah max-width: 400px; dan margin: 0 auto; supaya kartunya nggak melar dan ada di tengah. (auto artinya sisa ruang di kiri dan kanan dibagi sama rata.)
2. Dandani h1: ganti color dengan warna kesukaanmu.
3. Dandani input: coba padding, border, dan border-radius.
4. Dandani button: coba background, color: white;, border: none;, dan cursor: pointer; (supaya kursor berubah jadi tangan waktu menyentuh tombol).
5. Dandani .total: coba beri latar kuning muda, tulisan tebal (font-weight: bold;), dan rata tengah (text-align: center;).

Setelah itu, iseng-iseng aja. Ganti 16px jadi 0px atau 50px dan lihat sudut kartunya. Ganti warna sesukamu. Kalau berantakan, ada tombol Kembalikan ke awal. Nggak ada yang bisa kamu rusakkan.

Kalau mau mengintip jawabannya, klik Lihat jawaban. Di situ ada dua baris yang mungkin bikin bingung, jadi kujelaskan duluan:

• display: block; pada label membuat tulisan label menempati satu baris sendiri, sehingga kotak isiannya turun ke bawahnya. Tanpa itu, label dan kotak berdempet satu baris.
• box-sizing: border-box; pada input memastikan padding dan garis tepi ikut dihitung di dalam lebar kotak. Tanpa itu, width: 100% plus padding bikin kotak isian melebar keluar kartu. Kalau belum nangkap, percaya dulu aja, nggak masalah.

Sekarang aplikasimu sudah punya kerangka dan baju. Cantik, tapi masih “patung”. Di bab berikutnya, kita pasang otaknya.