Pelajaran 2: Warna dan teks · Ngoding dari Nol

Dandanan paling terasa dari sebuah halaman adalah warna dan tulisan. Pelajaran ini isinya sepuluh jurus yang akan kamu pakai terus seumur hidup.

Warna: tiga cara menulis

Warna bisa ditulis dengan tiga bentuk. Semuanya boleh, pilih yang paling enak.

color: red;           /* 1. nama warna: red, blue, green, gray, orange ... */
color: #0a66c2;       /* 2. kode hex: # lalu 6 karakter */
color: rgb(10, 102, 194); /* 3. campuran merah, hijau, biru (0 sampai 255) */

Kode hex terlihat seram, tapi kamu tidak perlu menghafal. Ambil dari color picker: ketik “color picker” di Google, geser-geser sampai ketemu warna yang disuka, salin kodenya.

Dua properti warna yang paling sering:

Properti	Mengubah
`color`	warna tulisan
`background-color`	warna latar di belakang elemen

Properti tulisan

Properti	Contoh	Fungsi
`font-size`	`20px`	ukuran huruf
`font-weight`	`bold`	tebal
`font-family`	`system-ui, Arial, sans-serif`	jenis huruf
`text-align`	`center`	rata kiri, tengah, kanan
`line-height`	`1.6`	jarak antarbaris (1.5 sampai 1.7 nyaman dibaca)
`text-decoration`	`underline` / `none`	garis bawah (`none` untuk menghapus garis di link)

Soal font-family: kamu menulis daftar, dipisah koma. Browser memakai yang pertama yang ada di komputer pembaca, kalau tidak ada lanjut ke yang berikutnya. Biasakan ujungnya sans-serif (huruf polos) sebagai cadangan.

Satuan px adalah Piksel (px)Titik terkecil di layar, dipakai sebagai satuan ukuran di CSS dan ditulis px.Penjelasan lengkap →, titik terkecil di layar.

Coba sendiri

Kerjakan tiga tantangan di komentar. Setiap properti ditulis di dalam kurung kurawal, jangan lupa titik koma.

Warna dan teks

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Warna dan teks</title>
  <style>
    body {
      background-color: #fff8e7;
    }
    h1 {
      /* Tantangan 1: rata tengah (text-align: center) dan warna #0a66c2 */
    }
    p {
      /* Tantangan 2: ukuran huruf 20px dan jarak antarbaris line-height: 1.6 */
    }
    .penting {
      /* Tantangan 3: tebal (font-weight: bold) dan garis bawah (text-decoration: underline) */
    }
  </style>
</head>
<body>
  <h1>Warna dan teks</h1>
  <p>Paragraf ini perlu huruf lebih besar supaya enak dibaca.</p>
  <p class="penting">Kalimat ini penting sekali.</p>
</body>
</html>

Hasilnya:

Console

Yang barusan kamu pelajari

color mengubah warna tulisan, background-color warna latar.
Warna boleh ditulis nama (red), hex (#0a66c2), atau rgb(...).
font-size, font-weight, font-family, text-align, line-height, text-decoration mengatur tulisan.
font-family berupa daftar cadangan, akhiri dengan sans-serif.
Properti salah eja tidak memunculkan error, hanya tidak berefek.