Apa itu CSS dan Buat apa ?
APA ITU CSS ?
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan desain dari halaman web. Jika HTML adalah struktur dasar atau kerangka sebuah website, maka CSS bertugas untuk memberi gaya (style) pada elemen-elemen yang ada di dalamnya. Tanpa CSS, sebuah website akan tampak seperti dokumen teks biasa—terorganisir, namun tanpa estetika. CSS memungkinkan pengembang web untuk mengubah warna, ukuran, bentuk, jarak, dan tata letak elemen-elemen HTML, sehingga menciptakan pengalaman visual yang lebih menarik dan interaktif bagi pengguna.
MENGAPA CSS PENTING ?
Ketika mengunjungi sebuah website, tampilan yang menarik sering kali menjadi faktor pertama yang dilihat pengunjung. Penggunaan CSS memungkinkan pengembang untuk menciptakan desain yang estetis dan responsif, memberikan pengalaman yang lebih menyenangkan bagi pengguna. Tanpa CSS, halaman web hanya akan menampilkan teks dan elemen yang terstruktur tanpa gaya, yang tentunya membuat pengalaman browsing menjadi kurang menarik.
CSS memisahkan konten (HTML) dari presentasi (gaya desain). Hal ini memberikan fleksibilitas kepada pengembang untuk mengubah desain situs tanpa mengubah struktur atau konten halaman itu sendiri. Misalnya, kita bisa mengganti warna latar belakang atau ukuran font tanpa perlu mengubah HTML yang mendasarinya.
BAGAIMANA CSS BEKERJA ?
CSS bekerja dengan cara menghubungkan gaya desain ke elemen-elemen HTML melalui selectors dan properties.
1. Selector: Selector adalah cara kita memilih elemen HTML yang akan diberi gaya. Misalnya, jika kita ingin mengubah gaya teks di semua paragraf, kita bisa memilih elemen <p> sebagai selector.
2. Properties: Properties adalah aturan yang mendeskripsikan bagaimana elemen yang dipilih akan diubah. Contoh property adalah color font-size dan margin.
3. Value: Value adalah nilai yang diberikan untuk sebuah property. Misalnya, color: red artinya teks akan berwarna merah.
Contoh sintaks dasar CSS:
p {
color: blue;
font-size: 16px;
}
Pada contoh di atas, kita memilih elemen <p> dengan selector p, kemudian memberikan dua property: color dengan nilai blue dan font-size dengan nilai 16px.
Tiga Cara Menyisipkan CSS ke dalam HTML
Ada tiga cara utama untuk menyisipkan CSS ke dalam halaman HTML:
Inline CSS: CSS
ditulis langsung di dalam atribut elemen HTML menggunakan style. Cara ini cocok
untuk pengaturan kecil dan satu kali.
<p style="color: blue; font-size: 16px;">Ini adalah paragraf berwarna biru.</p>
Internal CSS: CSS ditulis di dalam tag <style> di bagian <head> pada dokumen HTML. Ini berguna jika kita ingin menerapkan gaya pada seluruh halaman, namun hanya untuk halaman tersebut.
<style>
p {
color: green;
font-size: 18px;
}
</style>
External CSS: CSS ditulis dalam file terpisah dengan ekstensi .css, dan file ini dihubungkan ke halaman HTML melalui tag <link>. Ini adalah metode yang paling efisien dan direkomendasikan untuk proyek yang lebih besar karena memisahkan kode HTML dan CSS, memudahkan pemeliharaan, dan meningkatkan kinerja.
<link rel="stylesheet" href="styles.css">
Keunggulan Menggunakan CSS
Pemeliharaan yang lebih mudah: Dengan memisahkan desain dan struktur, CSS memungkinkan pengembang untuk mengubah tampilan situs tanpa merusak konten. Mengurangi duplikasi: CSS dapat diterapkan di berbagai halaman sekaligus dengan menghubungkannya ke file eksternal, mengurangi penulisan kode yang berulang. Responsif dan Fleksibel: CSS mendukung teknik desain responsif menggunakan media queries, yang memungkinkan tampilan website menyesuaikan dengan berbagai ukuran layar, dari desktop hingga smartphone. Pengalaman pengguna yang lebih baik: CSS memberi pengembang kemampuan untuk menciptakan animasi dan transisi yang menarik, meningkatkan interaksi dengan pengunjung situs.
Kesimpulan
CSS adalah alat yang sangat penting dalam dunia web development. Tanpa CSS, sebuah website hanya akan menjadi kumpulan teks dan gambar yang tidak terorganisir. Dengan CSS, kita bisa mengubah tampilan dan nuansa situs web agar lebih menarik, fungsional, dan responsif. Sebagai pemula, mempelajari dasar-dasar CSS adalah langkah pertama yang krusial dalam perjalanan menjadi seorang web designer atau developer yang handal.