Membuat File CSS

Editor dan browser sudah siap, dan folder proyek berisi index.html. Sekarang saatnya membuat berkas CSS yang sesungguhnya: styles.css. Berkas ini akan menjadi rumah bagi seluruh aturan gaya proyek kita, jadi mari kita mulai dengan kebiasaan yang benar sejak baris pertama — mulai dari cara membuat berkas, menamainya, hingga menentukan letaknya.

Membuat Berkas styles.css #

Buka folder proyek-latihan di VS Code, buat berkas baru lewat panel Explorer, lalu beri nama styles.css. Ekstensi .css penting: ekstensi ini memberi tahu editor bahwa isinya kode CSS, dan memberi tahu browser bahwa berkas ini berisi style sheet.

Berikut isi styles.css yang akan kita pakai sepanjang latihan — kamu bisa mengunduhnya lewat tombol pada blok kode:

css

/* ==================================================
   styles.css — berkas style awal proyek latihan
   Course CSS · section Persiapan Lingkungan
   ================================================== */

/* Gaya dasar untuk seluruh halaman */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background-color: #fdfcf8;
  margin: 0;
}

/* Judul utama halaman */
h1 {
  color: #1f6f54;
}

/* Kartu sambutan untuk dicoba di index.html */
.kartu-sambutan {
  max-width: 32rem;
  padding: 20px 24px;
  border: 1px solid #d9d2c0;
  border-radius: 12px;
  background-color: #ffffff;
}

Mari kita bedah isinya baris per baris:

Komentar pembuka: blok /* ... */ di bagian atas adalah komentar. Browser mengabaikan seluruh komentar; fungsinya memberi konteks bagi manusia yang membaca berkas. CSS hanya mengenal komentar /* ... */ — bentuk // yang ada di beberapa bahasa lain tidak berlaku di sini.
Aturan body: selector body memilih badan halaman. font-family menetapkan jenis huruf, line-height: 1.6 memberi jarak antarbaris yang nyaman, color dan background-color mengatur warna teks serta latar, dan margin: 0 menghapus jarak bawaan browser di tepi halaman.
Aturan h1: semua judul utama ditampilkan dengan warna hijau gelap (#1f6f54).
Aturan .kartu-sambutan: titik di awal berarti selector class; aturan ini menargetkan elemen dengan class="kartu-sambutan". padding memberi ruang di dalam kartu, border menambah garis tepi, border-radius membulatkan sudutnya, dan max-width membatasi lebar kartu.

Beberapa property di atas — padding, border, max-width — baru dibahas mendalam pada section berikutnya. Untuk sekarang cukup salin berkasnya dan amati efeknya; pemahaman penuh akan menyusul.

Aturan Penamaan Berkas CSS #

Nama berkas terdengar sepele, tetapi konsistensinya menghemat banyak waktu:

Kebiasaan	Contoh	Alasan
Huruf kecil semua	`styles.css`	Nama berkas peka huruf besar-kecil di server web; campuran huruf sering memicu 404
Kebab-case	`layout-utama.css`	Mudah dibaca dan aman dipakai di URL
Nama bermakna	`form.css`, `komponen.css`	Isinya langsung terbayang; hindari nama seperti `css1.css` atau `baru-fix.css`

Hindari juga spasi pada nama berkas. Spasi memaksa penulisan URL dengan kutip atau kode %20 dan sering menjadi sumber error yang sulit dilacak.

Letak Berkas di dalam Proyek #

Untuk latihan pertama, simpan styles.css sejajar dengan index.html:

text
proyek-latihan/
├── index.html
└── styles.css

Susunan datar seperti ini paling mudah untuk mulai. Namun begitu proyek bertambah — muncul berkas JavaScript, gambar, dan beberapa halaman HTML — folder datar menjadi sesak. Pada chapter berikutnya kita memindahkan styles.css ke dalam folder css/ tersendiri, dan chapter Struktur Folder CSS menuntaskan susunan lengkapnya.

Sambil menunggu, coba tambahkan satu aturan di akhir styles.css:

css
/* Tombol untuk halaman latihan */
.tombol-utama {
  background-color: #1f6f54;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
}

Aturan baru boleh ditambahkan pada baris mana pun di berkas; urutan antar aturan untuk selector yang berbeda tidak mempengaruhi hasil.

Kesalahan Umum saat Membuat Berkas CSS #

Tiga kesalahan berikut paling sering ditemui pada tahap ini. Mengenalnya lebih dulu menghemat waktu pencarian masalah:

Kesalahan	Akibat	Perbaikan
Tersimpan sebagai `styles.css.txt`	Browser menolak berkas karena bukan CSS yang sah	Saat menyimpan dari editor bawaan OS, pilih All files agar ekstensi tidak tertambah
Dinamai dengan huruf besar, misalnya `Styles.CSS`	Rujukan `styles.css` gagal di server yang peka huruf besar-kecil	Gunakan huruf kecil semua sejak berkas dibuat
Deklarasi ditulis di luar blok `{ ... }`	Aturan tidak diterapkan sama sekali	Pastikan setiap aturan berbentuk `selector { deklarasi; }`

Kesalahan pertama paling sering menimpa pengguna Windows yang membuat berkas lewat Notepad; editor pemrograman seperti VS Code tidak mengalami masalah ini karena selalu menyimpan berkas dengan nama persis seperti yang kita tulis.

Ringkasan #

Berkas styles.css kini berdiri di samping index.html dengan isi yang bisa langsung diunduh dan dipakai, diberi nama konsisten: huruf kecil, kebab-case, dan bermakna. Masih tersisa satu langkah penting — berkas CSS belum berpengaruh apa pun sampai dihubungkan ke HTML, dan itulah topik chapter berikutnya.