Apa itu CSS dan cara memasangnya

Di Kelas HTML, kamu membuat halaman yang isinya lengkap: judul, daftar, gambar. Tapi tampilannya masih polos, hitam di atas putih, persis seperti dokumen kantor zaman dulu.

Yang mendandani halaman namanya CSSCSSBahasa untuk mengatur tampilan halaman web, seperti warna, ukuran, dan jarak.Penjelasan lengkap →. Kalau HTML itu kerangka dan isi rumah, CSS itu cat, lantai, dan tata letak perabotnya.

Bentuk sebuah aturan CSS

CSS itu kumpulan aturan. Satu aturan bentuknya selalu begini:

h1 {
  color: red;
}

Bagian-bagiannya:

Properti dan nilai dipisah titik dua :, dan diakhiri titik koma ;. Semuanya dibungkus kurung kurawal. Lupa titik koma itu kesalahan nomor satu pemula, jadi biasakan.

Artinya: “Semua h1 warna tulisannya merah.”

Coba sendiri

Isi aturan untuk h1 dan p di kotak ini. Kalau sudah benar, hasilnya langsung berubah.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>CSS pertama</title>
  <style>
    /* Tantangan: ubah warna tulisan h1 jadi merah, dan p jadi abu-abu (gray) */
    h1 {
    }
    p {
    }
  </style>
</head>
<body>
  <h1>Halo, CSS!</h1>
  <p>Tulisan ini belum didandani.</p>
</body>
</html>

Dua cara memasang CSS

Cara 1: di dalam tag style. Dipakai di kotak di atas. Praktis untuk mencoba, karena semuanya satu berkas.

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

Cara 2: berkas CSS terpisah. Dipakai di proyek sungguhan. Aturannya ditulis di berkas gaya.css, lalu dipanggil dari HTML dengan tag <link>:

<head>
  <link rel="stylesheet" href="css/gaya.css">
</head>

Perhatikan href: itu pathPath (alamat berkas)Tulisan yang menunjukkan di folder mana sebuah berkas berada, misalnya gambar/kucing.svg.Penjelasan lengkap → menuju berkas CSS-nya, dihitung dari berkas HTML. Cara kerjanya sama persis dengan src pada gambar di pelajaran HTML 5 dan 6. Kalau path-nya salah, halamanmu tampil polos tanpa dandanan, dan browser tidak bilang apa-apa.

Komentar di CSS

Catatan untuk dirimu sendiri, tidak dibaca browser, ditulis seperti ini:

/* ini komentar, bebas ditulis apa saja */