Pada kali ini saya akan membahas tentang CSS(Cascade Style Sheet).Selamat membaca !
Sebelum itu,kita harus mengetahui bahwa HTML tidak dirancang untuk menentukan aspek visual pada desain sebuah website.HTML lebih menjurus ke bagaimana sebuah dokumen dibagi-bagi menurut struktur dokumen,dan tidak mengarah pada bagaimana mempercantik sebuah website.
Oleh karena itu,untuk menutup kelemahan dari HTML terutama dalam aspek visual,maka diciptakanlah script baru yang digunakan sebagai "pendamping" HTML yaitu CSS(Cascading Style Sheet).
Ibarat Arsitek dan Desain Interior maka kesimpulannya adalah :
- HTML (Arsitek) digunakan untuk menentukan struktur dokumen dan website
- CSS (Desain Interior) bertugas untuk mempercantik website tersebut.
Nah sedangkan CSS sendiri,merupakan kumpulan kode untuk mendefinisikan desain dari bahasa Mark Up.Karena adanya kata "mark-up" pada definisi CSS,maka relasi antara CSS dan HTML sangatlah dekat.Dengan CSS lah sebuah desain website yang dibangun menggunakan HTML akan menjadi lebih menarik dan variatif.
Sebagai contoh,kita dapat mewarnai kotak teks pada sebuah form dimana jika hanya mengandalkan HTML,hal ini tidak dapat terwujud.
Contoh script :
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan CSS 1</title>
</head>
<body>
<p>
<font color="red">Tulisan ini berwarna merah</font>
<br>
<font color="blue">Tulisan ini berwarna biru</font>
<br>
<font color="yellow">Tulisan ini berwarna kuning</font>
</p>
</body>
</html>
Hasilnya akan menjadi seperti berikut (gambar dapat diklik) :
Hasilnya akan menjadi seperti gambar berikut (bisa diklik):
Tulisan dengan 3 warna yang berbeda-beda
Script di atas menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf berwarna merah,biru, dan kuning.Dan sampai sejauh ini,kita tidak menemukan sesuatu yang mengarah pada alasan mengapa kita menggunakan CSS.
Namun jika di dalam website tersebut mengandung tulisan dalam jumlah yang banyak,tersusun dari ratusan paragraf,dan kita ingin mengubah seluruh warna menjadi warna biru misalnya.Maka kita harus mengganti kode HTML yang tak terhitung banyaknya.Belum lagi jika tulisan yang ingin diganti warnanya itu ada di beberapa file yang berbeda-beda.
Oleh karena itu kita membutuhkan CSS,karena dalam kondisi tersebut,CSS bisa digunakan untuk memisahkan "kode-kode" yang mengurusi tampilan" dan "kode-kode yang mengurusi konten/isi".
Berikut adalah contoh menuliskan script CSS :
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan CSS 3</title>
<style type="text/css">
.warnateks {color:blue;}
</style>
</head>
<body>
<p>
<font class=warnateks>Shingeki No Kyojin</font>
<br>
<font color=warnateks>Attack On Titan</font>
<br>
<font color=warnateks>Wings Of Freedom</font>
</p>
</body>
</html>
Pada contoh di atas,tag <font> tetap digunakan namun dengan memanfaatkan atribut class.Nilai dari atribut class sendiri adalah warna teks yang dispesifikasikan sebagai bagian dari CSS.Atribut class berguna untuk memasukkan code CSS pada tag <style> yang dapat ditemukan bagian dalam tag <head>.
Jadi jika kita ingin mengubah seluruh warna teks menjadi warna lain,misalnya hijau,maka kita tinggal mengubah isi dari CSS color : blue; menjadi color:green; .Dengan begitu seluruh tag yang memiliki class=warnateks akan otomatis berubah menjadi hijau.
Sekian pengenalan mengenai CSS.Jika ada yang kurang jelas bisa ditanyakan di kolom komentar.Terima Kasih !
makasihh,copas masbro
ReplyDelete