Pengertian CSS

CSS, atau Cascading Style Sheets, adalah bahasa gaya yang digunakan untuk mendesain tampilan halaman web. CSS bekerja dengan HTML untuk mengontrol tata letak, warna, font, dan elemen visual lainnya pada situs web. Dengan CSS, pengembang web dapat memisahkan konten dari presentasi, membuat kode lebih terorganisir, dan memungkinkan penyesuaian tampilan dengan lebih mudah.

Sejarah Singkat CSS

CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994. Setelah beberapa tahun pengembangan dan perbaikan, versi pertama dari CSS, yaitu CSS1, dirilis pada tahun 1996 oleh World Wide Web Consortium (W3C). Versi ini membawa beberapa fitur dasar yang masih digunakan hingga sekarang. Seiring waktu, CSS mengalami beberapa pembaruan signifikan, dengan CSS2 dirilis pada tahun 1998 dan CSS3 yang dimulai pengembangannya pada awal 2000-an dan terus diperbarui hingga sekarang.

Fungsi dan Manfaat CSS

1. Pemilihan dan Penataan Elemen: CSS memungkinkan pengembang untuk memilih elemen HTML tertentu dan menerapkan gaya tertentu. Misalnya, pengembang dapat mengubah warna teks semua paragraf atau mengatur margin dan padding elemen tertentu.
2. Konsistensi Tampilan: Dengan CSS, pengembang dapat memastikan konsistensi gaya di seluruh halaman web atau situs. Ini menghemat waktu dan usaha karena satu file CSS dapat diterapkan ke banyak halaman.
3. Pemeliharaan Lebih Mudah: Karena gaya disimpan dalam file terpisah, perubahan pada desain dapat dilakukan dengan mudah tanpa harus mengubah setiap halaman HTML satu per satu.
4. Pemisahan Konten dan Desain: Dengan memisahkan konten (HTML) dari desain (CSS), situs web menjadi lebih terstruktur dan mudah dikelola. Ini juga memungkinkan desain yang responsif dan adaptif terhadap berbagai perangkat.
5. Kompatibilitas dengan Berbagai Perangkat: CSS mempermudah pembuatan desain yang responsif, yang berarti tampilan situs web dapat menyesuaikan dengan berbagai ukuran layar, dari desktop hingga perangkat mobile.

Struktur Dasar CSS

CSS terdiri dari aturan yang mengandung selektor dan deklarasi. Selektor menunjukkan elemen HTML mana yang akan diberi gaya, sementara deklarasi menentukan gaya yang diterapkan pada elemen tersebut. Deklarasi terdiri dari properti dan nilai.

Contoh sederhana aturan CSS:

css

Salin kode

p {

    color: blue;

    font-size: 16px;

}

Pada contoh di atas, p adalah selektor yang memilih semua elemen paragraf

. Gaya yang diterapkan adalah mengubah warna teks menjadi biru dan ukuran font menjadi 16 piksel.

Penempatan CSS

Ada beberapa cara untuk menempatkan CSS dalam dokumen HTML:

1. Inline CSS: CSS ditulis langsung pada atribut style dalam elemen HTML.

html

Salin kode

Ini adalah paragraf dengan gaya inline.

2. Internal CSS: CSS ditempatkan dalam tag
   3. External CSS: CSS ditulis dalam file terpisah dengan ekstensi .css dan dihubungkan ke dokumen HTML dengan tag .

   html

   Salin kode

      

   Kesimpulan

   CSS adalah alat yang sangat kuat dan esensial dalam pengembangan web modern. Dengan memisahkan konten dari desain, CSS memberikan fleksibilitas yang lebih besar, memungkinkan konsistensi tampilan di seluruh halaman, dan membuat pemeliharaan situs web lebih mudah. Penguasaan CSS adalah langkah penting bagi siapa pun yang ingin terlibat dalam desain dan pengembangan web.