APA ITU CSS?

Selamat Datang di Dunia TJKT!

Pengantar CSS: Mengapa Kita Membutuhkannya?

Bisa kalian bayangkan sebuah rumah. HTML (HyperText Markup Language) adalah fondasi, dinding, dan struktur utama rumah tersebut. Tanpa HTML, tidak ada apa-apa. Namun, rumah itu akan terlihat polos dan kaku. Di sinilah CSS (Cascading Style Sheets) berperan. CSS adalah cat, furnitur, dekorasi, dan semua elemen estetika yang membuat rumah itu indah, nyaman, dan fungsional.

Dengan kata lain, HTML mengatur konten dan struktur, sementara CSS mengatur presentasi visualnya.

Tiga Pilar Utama CSS

Inline Style

Ini adalah cara paling sederhana, di mana kita langsung menuliskan CSS di dalam tag HTML menggunakan atribut style.

contoh: 


<h1 style="color: blue; font-size: 24px;">
Judul Halaman</h1>

Kelebihan: Cepat dan mudah untuk perubahan kecil.

Kekurangan: Tidak efisien untuk proyek besar karena kode menjadi berantakan, sulit dikelola, dan tidak dapat digunakan kembali. Ini sangat tidak disarankan untuk praktik profesional.

Internal Style Sheet

Kita menempatkan semua aturan CSS di dalam tag style yang berada di dalam tag head dari dokumen HTML.

Kelebihan: Berguna untuk satu halaman web saja.

Kekurangan: Jika memiliki banyak halaman, kita harus menyalin kode CSS yang sama berulang-ulang, yang tidak efektif.

External Style Sheet

Ini adalah metode yang paling profesional dan direkomendasikan. Kita membuat file .css terpisah (misalnya style.css) yang berisi semua aturan gaya, lalu menautkannya ke dokumen HTML menggunakan tag link di dalam head.

Kelebihan:

  • Mudah Dikelola: Satu file CSS dapat digunakan untuk mengatur tampilan seluruh situs web.
  • Konsisten: Perubahan pada satu file CSS akan memengaruhi semua halaman yang ditautkan, memastikan konsistensi desain.
  • Kode Bersih: Memisahkan struktur HTML dari gaya visual, membuat kode lebih rapi dan mudah dibaca.

Anatomi Aturan CSS

Setiap aturan CSS terdiri dari dua bagian utama: Selector dan Declaration Block. Contohnya:


h1 {
  color: blue;
  font-size: 24px;
}

Kode di atas akan mengubah warna teks dari semua elemen h1 menjadi biru dan ukurannya menjadi 24 piksel.

Penggunaan kombinasi <pre> dan <code> sangat penting untuk menampilkan kode dengan rapi dan mudah dibaca.

  1. Declaration Block: Ini adalah blok yang berisi satu atau lebih deklarasi, yang diapit oleh {}.
  2. Property: Ini adalah jenis atribut yang ingin kita ubah, seperti color, font-size, background-color.
  3. Value: Ini adalah nilai yang kita berikan pada properti tersebut. Contoh: blue, 24px, #f0f0f0.
  4. Tipe-tipe Selector CSS yang Paling Sering Digunakan
  5. Element Selector: Memilih semua elemen HTML dari jenis tertentu. Contoh: p { ... } akan memilih semua paragraf.
  6. ID Selector: Memilih elemen HTML dengan atribut id tertentu. ID harus unik di setiap halaman. Ditandai dengan #. Contoh: #header { ... }.
  7. Class Selector: Memilih semua elemen HTML dengan atribut class tertentu. Class bisa digunakan berulang kali pada banyak elemen. Ditandai dengan .. Contoh: .button { ... }.
  8. Descendant Selector: Memilih elemen yang berada di dalam elemen lain. Contoh: ul li { ... } akan memilih semua yang berada di dalam .

Konsep Penting: Box Model

Setiap elemen HTML, pada dasarnya, adalah sebuah kotak. Konsep ini dikenal sebagai Box Model. Memahaminya sangat krusial untuk melakukan layout yang baik.

Sebuah elemen terdiri dari empat lapisan, dari dalam ke luar:

  1. Content: Area tempat konten (teks, gambar) berada.
  2. Padding: Ruang kosong di antara konten dan border.
  3. Border: Garis yang mengelilingi padding dan konten.
  4. Margin: Ruang kosong di luar border, memisahkan elemen dari elemen lain.

Dengan menguasai konsep ini, kalian bisa mengatur jarak antar elemen, ukuran kotak, dan lain-lain dengan presisi.

Contoh JavaScript Sederhana

  1. Contoh Paling Dasar: Menampilkan "Halo Dunia!"

    Ini adalah contoh klasik. Kode ini akan menampilkan teks "Halo Dunia!" di konsol browser. Ini sangat berguna untuk memeriksa apakah kode Anda berjalan dengan benar.

    console.log("Halo Dunia!");

  2. Cara menjalankan:

    • Buka browser seperti Chrome atau Firefox.
    • Klik kanan di halaman mana saja, lalu pilih Inspect (atau Periksa).
    • Pilih tab Console.
    • Ketik kode di atas, lalu tekan Enter. Anda akan melihat hasilnya.