CSS atau Cascading Style Sheets adalah bahasanya desainer web. Namun sesungguhnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS pada artikel ini.
Pengertian CSS
Pada bahasa bakunya, seperti di kutip dari wikipedia, CSS ialah “kumpulan kode yang digunakan bagi mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya ialah HTML.
Bagi pengertian bebasnya, CSS ialah kumpulan kode program yang digunakan bagi mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita dapat mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) segala kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML diperuntukkan bagi merancang struktur, atau konten dari halaman web. Sedangkan CSS digunakan bagi tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.
Manfaat dan Kegunaan CSS
Awal mula diperlukannya CSS dikarenakan keperluan akan halaman web yang semakin kompleks. Di awal kemunculan HTML, kita dapat merancang suatu paragraf bewarna merah dengan menulis seketika kode tersebut didalam tag HTML, atau merancang latar belakang sebuah halaman dengan warna biru. Contoh kode HTML bagi hal itu ialah selaku berikut:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/> <title>Test Tag Font HTML</title><br/></head><br/><br/><body><br/> <p><br/> CSS adalah bahasanya <font color=red>desainer web</font>.<br/> Namun sesungguhnya, apa itu CSS?<br/> <br /><br/> <font color=red>CSS </font> ialah kumpulan kode yang digunakan<br/> bagi mendefenisikan desain dari bahasa markup,<br/> <font color=red>salah satunya ialah HTML</font>.<br/> <br /><br/> Dengan CSS kita dapat mengubah desain dari<br/> <font color=red>text, warna, gambar dan latar belakang</font><br/> dari (hampir) segala kode tag HTML.<br/> </p><br/></body><br/></html> |
Saya menggunakan tag <font> bagi merancang beberapa kata di pada paragraf tersebut berwarna merah. Hal ini tak salah, dan semuanya berjalan sesuai keinginan. Bagi sebuah artikel yang mempunyai 5 paragraf, kita tinggal copy-paste tag <font color=”red”> di kata-kata tertentu.
Namun setelah situs tersebut mempunyai katakanlah 50 artikel seperti diatas, dan karena sesuatu hal kamu ingin merubah seluruh text merah tadi menjadi biru, karenanya akan dibutuhkan waktu yang lama bagi mengubahnya satu persatu, halaman per halaman.
Pada kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Bagi paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
|
1 |
]<!DOCTYPE html><br/><html><br/><head><br/> <title>Test Background Color CSS</title><br/> <style type=text/css><br/> .warna {<br/> color: red;<br/> }<br/> </style><br/></head><br/> <br/><body><br/> <p><br/> CSS adalah bahasanya <span class=warna>desainer web</span>.<br/> Namun sesungguhnya, apa itu CSS?<br/> <br /><br/> <span class=warna>CSS </span>ialah kumpulan kode<br/> yang digunakan bagi mendefenisikan desain dari bahasa markup,<br/> <span class=warna>salah satunya ialah HTML</span>.<br/> <br /><br/> Dengan CSS kita dapat mengubah desain dari<br/> <span class=warna>text, warna, gambar dan latar belakang</span><br/> dari (hampir) segala kode tag HTML.<br/> </p><br/></body><br/></html> |
Pada contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri adalah tag yang tak bermakna, namun dapat di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class bermanfaat bagi memasukkan kode CSS di tag <style> di bagian head. (Lebih lanjut mengenai tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)
Seandainya kita ingin merubah seluruh warna menjadi biru, karenanya tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang mempunyai class=”warna” akan otomatis berubah menjadi biru.
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Pada panduan berikutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
