Mengenal CSS: Rahasia Membuat Tampilan Website Jadi Keren dan Menarik

 Halo semuanya! Setelah sebelumnya kita belajar tentang HTML sebagai kerangka dasar sebuah halaman web, kali ini kita akan membahas "pasangan sejatinya", yaitu CSS.

Pernahkah kalian melihat website yang tampilannya sangat rapi, warnanya indah, dan tata letaknya nyaman dipandang? Itu semua adalah hasil kerja dari CSS. Yuk, kita kupas tuntas apa itu CSS dan mengapa kita membutuhkannya!

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Jika kita mengibaratkan sebuah website sebagai sebuah bangunan, maka:

• HTML adalah struktur bangunannya (dinding, lantai, atap).

• CSS adalah cat tembok, hiasan lampu, model jendela, dan furniturnya agar rumah tersebut terlihat cantik.

Tanpa CSS, semua website di internet akan terlihat sangat polos, hanya berisi teks hitam di atas latar belakang putih, persis seperti dokumen skripsi.

---

Mengapa CSS Sangat Penting?

1. Mengatur Tampilan: Kamu bisa mengubah warna teks, jenis font, ukuran gambar, hingga warna latar belakang.

2. Mengatur Tata Letak (Layout): CSS memungkinkan kita membagi halaman menjadi kolom-kolom, mengatur posisi tombol, atau membuat menu navigasi yang keren.

3. Responsif: Dengan CSS, kita bisa membuat website agar tampilannya tetap rapi saat dibuka di HP (Smartphone) maupun di komputer.

4. Efisien: Kamu bisa mengatur gaya untuk seluruh halaman web hanya dengan satu file CSS saja.

---

3 Cara Memasang CSS pada HTML

Ada tiga cara umum untuk menyisipkan CSS ke dalam kode HTML kita:

1. Inline CSS: Menuliskan kode CSS langsung di dalam tag HTML. Contoh: <h1 style="color: blue;">Halo Dunia</h1>

2. Internal CSS: Menuliskan kode CSS di bagian atas file HTML, tepatnya di dalam tag <style>.

3. External CSS: Cara yang paling direkomendasikan. Kita membuat file terpisah dengan ekstensi .css (misalnya: style.css) lalu memanggilnya ke dalam file HTML.

---

Contoh Sederhana Kode CSS

Mari kita coba lihat bagaimana CSS mengubah tampilan teks. Misalnya kita ingin membuat judul tulisan berwarna merah dan berada di tengah halaman:

CSS

h1 {
  color: red;
  text-align: center;
  font-family: Arial, sans-serif;
}

Dengan kode di atas, semua tag <h1> di website kamu otomatis akan berubah menjadi merah, rata tengah, dan menggunakan font Arial. Mudah, bukan?

Kesimpulan

CSS adalah keterampilan wajib bagi siapa saja yang ingin belajar membuat website. Dengan menguasai CSS, kamu punya kekuatan penuh untuk mengubah tampilan website yang biasa saja menjadi luar biasa.

Di postingan selanjutnya, kita akan coba praktik langsung "Menghias Formulir HTML" yang sudah kita buat sebelumnya menggunakan CSS. Jadi, jangan sampai ketinggalan ya!

Punya pertanyaan tentang CSS? Tulis di kolom komentar di bawah ya!