Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets yang merupakan sebuah stylesheet language (bahasa gaya lembar) yang digunakan untuk mendesain, mempercantik tampilan visual (Interface) pada halaman web. Pada HTML, CSS membuat web menjadi lebih menarik, lebih indah dan banyak orang akan betah mengunjungi web yang memiliki tampilan yang cantik. CSS memungkinkan developer web untuk memodifikasi dan mendesain sesuka hati seperti ukuran, jenis font, warna, tata letak elemen HTML, dan lain sebagainya secara terpisah dari kontennya.
Latar Belakang CSS
Dalam perkembangannya, CSS telah berkembang menjadi tiga versi utama: CSS1, CSS2, dan CSS3. CSS1 diluncurkan pada tahun 1996, sedangkan CSS2 dirilis pada tahun 1998, dan CSS3 di tahun 201. CSS3 merupakan versi terbaru dan menyediakan fitur-fitur baru dan keren seperti transisi, transformasi, animasi, media queries, dan lainya.
Fungsi CSS
Seperti diatas CSS bertujuan untuk mengatur tampilan atau UI (User Interface) pada halaman web secara rapi dan bagus, serta mempercepat proses pengembangan dan pemeliharaan situs web. Dalam prosesnya, CSS bekerja dengan cara memperlihatkan kepada browser web bagaimana menampilkan elemen HTML pada suatu halaman web.
Cara Kerja CSS
CSS bekerja dengan cara menempatkan kode CSS yang terhubung ke file HTML, ada beberapa cara yang bisa kamu gunakan untuk untuk menerapkan CSS ke HTML. Berikut caranya :
- Inline CSS : CSS ditulis langsung dalam tag HTML yang bersangkutan, dengan menambahkan atribut “style” pada tag HTML. Contoh :
<h1 style="color: blue; font-size: 24px;">Judul Halaman</h1> - Internal CSS : Kode CSS ditulis dalam tag <style>, pastikan penempatanya di dalam tag <head>. Contoh :
<head> <style> h1 { color: red; font-size: 30px; } </style> </head> <body> <h1>Judul Halaman</h1> </body>
- External CSS : CSS ditulis dalam file terpisah dengan format .css di dalam tag <head> dan menggunakan tag <link> untuk memanggil file CSS dari HTML. Contoh :
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Judul Halaman</h1> </body>
CSS3
CSS3 merupakan versi terbaru dari Cascading Style Sheets (CSS), fungsinya sama seperti CSS sebelumnya digunakan untuk mendesain, menata, dan mempercantik halaman web. Bedanya CSS3 menawarkan banyak fitur baru, unik, dan peningkatan performa dibandingkan dengan CSS versi sebelumnya.
- Transisi dan Animasi yang Lebih Halus : CSS3 memungkinkan pengguna untuk membuat transisi dan animasi yang lebih halus dan interaktif di halaman web. Contoh :
div { transition: width 2s; } div:hover { width: 300px; }
- Media Queries yang Lebih Kuat : Dalam CSS3 kamu bisa mengatur responsivitas web, kamu bisa mengatur model tampilan yang berbeda-beda tergantung device yang digunakan para pengguna website, entah itu smartphone, tablet, laptop, atau yang lain. Contoh :
@media screen and (max-width: 600px) { body { background-color: blue; } }
- Efek Bayangan yang Lebih Bagus : Pada CSS3, kamu dapat membuat efek bayangan yang lebih bagus dan kompleks di halaman web, sehingga membuat konten website kamu menjadi lebih hidup. Contoh :
div { box-shadow: 5px 5px 5px #888888; }
Jika kamu tertarik belajar CSS, cobalah untuk mulai dari dasar-dasarnya dan mempraktikkannya secara langsung. Dengan mempelajari CSS, kamu dapat berkreasi menciptakan desain yang menarik, tata letak sesuai hati, tampilan yang cantik, dan pengalaman pengguna yang lebih baik untuk situs web kamu.