CSS (Cascading Style Sheets) adalah salah satu elemen kunci dalam pengembangan web yang memungkinkan pengaturan dan pengendalian tampilan dan desain situs web. Tanpa CSS, situs web akan menjadi sekumpulan teks dan elemen tanpa format atau tampilan yang menarik. Dalam artikel ini, kita akan menjelajahi pengetahuan dasar tentang CSS, termasuk apa itu CSS, cara menggunakannya, dan prinsip dasar dalam memahami gaya dan tampilan situs web.
Apa Itu CSS?
CSS adalah singkatan dari “Cascading Style Sheets.” Ini adalah bahasa stylesheet yang digunakan untuk mengendalikan tampilan elemen-elemen HTML pada situs web. Dengan menggunakan CSS, kamu dapat mendefinisikan berbagai gaya dan properti seperti warna, ukuran teks, spasi, tata letak, dan banyak lagi. CSS memisahkan struktur (HTML) dan tampilan (CSS) dari situs web, yang memungkinkan pengembang untuk membuat perubahan desain tanpa harus menyentuh struktur konten.
Bagaimana Cara Menggunakan CSS?
CSS dapat diterapkan ke elemen HTML dalam tiga cara utama:
1. Inline Styles
Kamu dapat menambahkan gaya langsung ke elemen HTML menggunakan atribut style. Ini adalah metode yang paling sederhana dan cocok untuk perubahan kecil yang hanya berlaku untuk satu elemen. Contohnya seperti ini:
<p style=”color: blue; font-size: 16px;”>Ini adalah teks dengan gaya inline.</p>
Namun, penggunaan inline styles tidak disarankan untuk proyek besar karena sulit untuk mengelola dan memelihara gaya-gaya tersebut.
2. Internal Styles
Kamu dapat menempatkan gaya CSS di dalam tag <style> di bagian <head> dari dokumen HTML. Ini berlaku untuk seluruh halaman web. Contohnya seperti ini:
<head>
 <style>
  p {
   color: blue;
   font-size: 16px;
  }
 </style>
</head>
<body>
 <p>Ini adalah teks dengan gaya internal.</p>
</body>
Meskipun ini lebih baik daripada inline styles, namun gaya ini tetap terbatas pada satu halaman web.
3. External Styles
Ini adalah metode yang paling umum digunakan. Kamu dapat membuat file CSS terpisah dengan ekstensi .css dan menghubungkannya ke halaman web HTML dengan menggunakan tag <link>. Ini memungkinkan kamu untuk mengelola gaya secara terpusat yang dapat digunakan di seluruh situs web. Contohnya seperti ini:
index.html:
<head>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
 <p>Ini adalah teks dengan gaya dari file eksternal.</p>
</body>
style.css:
p {
 color: blue;
 font-size: 16px;
}
Selektor CSS
Selektor CSS adalah cara kamu memilih elemen-elemen yang akan diberi gaya. Ada beberapa jenis selektor CSS yang umum digunakan:
- Selektor Elemen (Element Selector): Ini adalah selektor paling dasar yang memilih semua elemen dengan nama yang sama. Contoh: p akan memilih semua elemen <p> pada halaman.
- Selektor Kelas (Class Selector): Kamu dapat menambahkan atribut class pada elemen dan kemudian menggunakan selektor kelas untuk menerapkan gaya ke elemen-elemen dengan kelas yang sama. Contoh: .judul akan memilih semua elemen dengan class=”judul”.
- Selektor ID (ID Selector): Kamu dapat menambahkan atribut id pada elemen dan menggunakan selektor ID untuk menerapkan gaya ke elemen dengan ID tertentu. Contoh: #header akan memilih elemen dengan id=”header”.
- Selektor Turunan (Descendant Selector): Ini memungkinkan kamu memilih elemen yang ada di dalam elemen lain. Contoh: ul li akan memilih semua elemen <li> yang berada dalam elemen <ul>.
- Selektor Berantai (Compound Selector): Kamu dapat menggabungkan beberapa selektor untuk memilih elemen dengan kriteria yang lebih spesifik. Contoh: nav ul akan memilih semua elemen <ul> yang berada dalam elemen <nav>.
Properti dan Nilai CSS
Setelah kamu memilih elemen yang akan diberi gaya, langkah selanjutnya adalah mendefinisikan properti dan nilai gaya. Berikut beberapa properti umum dalam CSS:
- Color (Warna): Mengatur warna teks. Contoh: color: red;.
- Font-Size (Ukuran Font): Mengatur ukuran teks. Contoh: font-size: 18px;.
- Font-Family (Jenis Font): Mengatur jenis font teks. Contoh: font-family: ‘Arial’, sans-serif;.
- Background-Color (Warna Latar Belakang): Mengatur warna latar belakang elemen. Contoh: background-color: #f0f0f0;.
- Margin dan Padding: Mengatur jarak antara elemen dan elemen sekitarnya (margin) atau jarak antara batasan elemen dan kontennya (padding).
- Border (Batas): Mengatur tampilan batas elemen, termasuk ketebalan, warna, dan gaya. Contoh: border: 1px solid #000;.
- Width dan Height (Lebar dan Tinggi): Mengatur lebar dan tinggi elemen. Contoh: width: 300px; height: 200px;.
- Text-Align (Penyelarasan Teks): Mengatur penyelarasan teks di dalam elemen. Contoh: text-align: center;.
- Display (Tampilan): Mengatur tampilan elemen, seperti block, inline, atau none.
- Position (Posisi): Mengatur posisi elemen, seperti static, relative, absolute, atau fixed.
Konsep Kaskade (Cascading) dalam CSS
Konsep utama di balik “Cascading Style Sheets” adalah kaskade. Ini mengacu pada cara CSS menentukan nilai yang akan diterapkan pada elemen ketika ada beberapa aturan yang berlaku. Kaskade mengikuti urutan tertentu:
- Kaskade berdasarkan Spesifikasi: CSS akan mengikuti urutan spesifikasi dari yang paling umum hingga yang paling spesifik. Aturan yang lebih spesifik akan menggantikan aturan yang lebih umum.
- Kaskade berdasarkan Nilai Deklarasi: Jika ada dua aturan yang sama spesifikasinya, maka nilai deklarasi akan digunakan. Misalnya, jika ada dua aturan yang mendefinisikan warna teks, warna dari aturan terakhir yang akan digunakan.
- Kaskade berdasarkan Urutan Dokumen: Jika semua hal lain sama, urutan aturan dalam dokumen akan menentukan nilai yang diterapkan. Aturan yang lebih awal dalam dokumen akan digunakan.
Contoh Penggunaan CSS
Mari lihat contoh sederhana penggunaan CSS untuk mengubah tampilan teks pada sebuah elemen HTML. Pertama, kita akan menambahkan elemen HTML:
<!DOCTYPE html>
<html>
<head>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
 <h1 class=”judul”>Selamat Datang di Website Kami</h1>
 <p class=”teks”>Ini adalah contoh teks dengan gaya CSS.</p>
</body>
</html>
Kemudian, kita akan menambahkan gaya ke dalam file style.css:
/* Memilih elemen dengan class “judul” */
.judul {
 color: blue;
 font-size: 24px;
}
/* Memilih elemen dengan class “teks” */
.teks {
 color: green;
 font-size: 16px;
}
Dalam contoh ini, kita menggunakan selektor kelas untuk memilih elemen-elemen dengan class=”judul” dan class=”teks”. Kami kemudian mendefinisikan properti gaya seperti warna dan ukuran font untuk masing-masing elemen.
CSS adalah alat yang sangat penting dalam pengembangan web modern. Dengan memahami konsep dasar CSS, kamu dapat mengendalikan tampilan dan desain situs web kamu dengan lebih tepat dan kreatif. Kamu dapat eksperimen dengan berbagai gaya, selektor, dan properti CSS untuk menciptakan tampilan yang sesuai dengan visi. Teruslah belajar dan mengembangkan keterampilan CSS, karena ini akan membantu kamu membangun situs web yang lebih menarik dan efisien. Semoga artikel ini membantu kamu memahami pengetahuan dasar tentang CSS dan memberikan landasan yang kuat untuk eksplorasi lebih lanjut dalam dunia desain web.
