Tutorial CSS / Apa Itu CSS dan Apa Perbedaannya dengan HTML?

CSS (Cascading Style Sheets) mengontrol tampilan dan tata letak dokumen HTML, termasuk warna, font, jarak, dan penempatan elemen. HTML menggambarkan konten dan strukturnya; CSS menentukan bagaimana struktur itu disajikan.

Bagaimana HTML dan CSS membagi tanggung jawab

Bayangkan Anda sedang membuat halaman informasi tentang taman. Fakta bahwa “Small Garden” (taman kecil) adalah judul yang paling penting di halaman tersebut diwakili oleh h1 dalam HTML. CSS menentukan apakah judul ditampilkan dengan warna hijau dan ukuran fontnya. Hanya karena warnanya hijau tidak berarti paragraf biasa memiliki makna sebagai judul.

JavaScript adalah bahasa pemrograman yang menambahkan perilaku ke halaman web. CSS juga dapat mengubah bentuk atau menampilkan animasi ketika mouse diarahkan ke atasnya, sehingga mengubah tampilan layar tidak selalu berarti JavaScript telah digunakan. Di sini kita pertama-tama fokus pada pemisahan konten dan tampilan.

Mengapa sebuah halaman memiliki gaya sebelum Anda menulis CSS

Peramban memiliki gaya bawaan. Inilah sebabnya judul muncul besar, ada jarak antara paragraf, dan tautan muncul bergaris bawah tanpa perlu menulis CSS secara langsung. Font dan margin bawaan dapat berbeda tergantung pada peramban dan pengaturan pengguna. Dengan menambahkan CSS, Anda dapat menyesuaikan tampilan yang Anda butuhkan.

Tempelkan HTML berikut ke editor teks, simpan sebagai index.html dalam format UTF-8, dan buka di peramban Anda. Pastikan nama file bukan index.html.txt. Jika ekstensi file tersembunyi, periksa ekstensi di format penyimpanan editor dan properti file.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Fragmen ini adalah contoh dari struktur teks. Jika Anda ingin memulai langsung, gunakan contoh lengkap di bawah ini. Jika Anda membaca judul dan teks panduan terlebih dahulu, mudah untuk membedakan apakah konten sebenarnya atau hanya tampilannya yang berubah saat mengubah CSS.

Baca selektor, properti, dan nilai

h1 {
  color: #087f5b;
}

h1 adalah selektor, color adalah properti, dan #087f5b adalah nilainya. Sebuah properti dan nilai yang digabungkan dengan titik dua membentuk deklarasi, seperti color: #087f5b;. Warna heksadesimal enam digit mewakili komponen merah, hijau, dan biru. Untuk detail lebih lanjut, lihat Sintaks CSS: Selektor, Deklarasi, Komentar, dan Kesalahan.

Aturan ini mengubah warna teks elemen h1 dalam HTML menjadi hijau. Aturan ini tidak menerjemahkan kalimat atau menambahkan paragraf. Untuk membedakan dan menghias hanya teks panduan, tambahkan class="notice" ke HTML dan pilih .notice dari CSS. Titik adalah notasi pemilih kelas di CSS dan tidak termasuk dalam nama kelas di HTML.

Penjelasan bahwa CSS bertanggung jawab atas tampilan dokumen web juga dapat ditemukan di pengantar CSS di MDN.

Jalankan contoh Small Garden secara lengkap

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Saat Anda membuka file yang disimpan, Anda akan melihat judul berwarna hijau di latar belakang terang, dan informasi jam operasional akan memiliki batas dan ruang. Konten di dalam elemen style adalah CSS. Tabel berikut memberikan deskripsi minimal untuk membaca properti yang digunakan dalam contoh.

Anda tidak perlu menghafal setiap properti pada tahap ini. Pertama, identifikasi elemen mana yang cocok dengan selektor dan aspek elemen mana yang diubah oleh setiap deklarasi. Stylesheet eksternal memungkinkan Anda memakai desain yang sama pada beberapa halaman. Untuk detail lebih lanjut, lihat Terapkan CSS dengan Gaya Inline, Internal, dan Eksternal.

Ubah tiga nilai dan bandingkan hasilnya

1. Ubah nilai properti color pada aturan h1 menjadi #1d4ed8. Jika Anda menyimpan dan memuat ulang, hanya judul besar yang akan berwarna biru. Warna h2 dan paragraf umum pada panduan pengunjung tidak tunduk pada aturan ini.
2. Ubah line-height dari body dari 1.7 menjadi 2. Tinggi baris teks di body akan lebih besar. Anda bisa lebih mudah melihat perbedaannya dengan memasukkan paragraf yang terdiri dari lebih dari dua baris atau mempersempit jendela.
3. Ubah nilai background-color pada aturan .notice menjadi #fff4cc. Hanya latar belakang informasi jam operasional yang berubah menjadi kuning. Latar belakang seluruh halaman ditentukan secara terpisah di body, sehingga tetap sama.

Alih-alih mengubah ketiga nilai sekaligus, simpan dan periksa setiap kali Anda memodifikasi satu item. Jika hasilnya berbeda, periksa apakah file yang diubah dan file yang dibuka di browser sama dan apakah tanda kurung kurawal dan titik dua tetap ada. Setelah selesai dengan latihan, kembalikan ketiga nilai ke keadaan semula, segarkan, dan bandingkan dengan tampilan asli. Selama proses ini, kuncinya adalah mempertahankan struktur judul HTML, paragraf, dan tautan.