Setelah mempelajari cara penulisan HTML, langkah selanjutnya dalam mempelajari pemograman web adalah mempelajari Cascading Style Sheets atau lebih populer dengan singkatannya, yakni CSS. HTML dan CSS adalah bagian tak terpisahkan dari website modern saat ini. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari website, seperti warna dan font yang digunakan.
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.
<! DOCTYPE html> < html > < head > < title >Test Tag Font HTML</ title > </ head > < body > < p > CSS merupakan bahasanya < font color = "red" >desainer web</ font >. Namun sebenarnya, apa itu CSS? < br /> < font color = "red" >CSS </ font > adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, < font color = "red" >salah satunya adalah HTML</ font >. < br /> Dengan CSS kita bisa mengubah desain dari < font color = "red" >text, warna, gambar dan latar belakang</ font > dari (hampir) semua kode tag HTML. </ p > </ body > </ html > |
Menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
<!DOCTYPE html> <html> <head> <title>Test Background Color CSS</title> <style type= "text/css" > .warna { color : blue ; } </style> </head> <body> <p> CSS merupakan bahasanya <span class=warna>desainer web</span>. Namun sebenarnya, apa itu CSS? <br /> <span class=warna>CSS </span>adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, <span class=warna>salah satunya adalah HTML</span>. <br /> Dengan CSS kita bisa mengubah desain dari <span class=warna>text, warna, gambar dan latar belakang</span> dari (hampir) semua kode tag HTML. </p> </body> </html> |
Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head.
Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
<!DOCTYPE html> <html> <head> <title>Contoh Inline Style CSS</title> </head> <body> <h 2 style= "background-color:black; color:white" > Text ini akan bewarna putih dan background warna hitam </h 2 > </body> </html> |
Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan motode internal style sheets CSS:
<!DOCTYPE html> <html> <head> <title>Contoh Inline Style CSS</title> <style type= "text/css" > h 2 { background-color : black ; color : white ; } </style> </head> <body> <h 2 > Text ini akan bewarna putih dan background warna hitam </h 2 > </body> </html> |
Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.
Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external style sheets.
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css
Isi dari file belajar.css :
h 2 { background-color : black ; color : white ; } |
Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, savelah pada folder yang sama dengan halaman HTML kita.
Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama adalah menggunakan @import
Contoh penggunaan @import CSS:
<!DOCTYPE html> <html> <head> <title>Contoh Inline Style CSS</title> <style type= "text/css" > @import url (belajar.css); </style> </head> <body> <h 2 > Text ini akan bewarna putih dan background warna hitam </h 2 > </body> </html> |
Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>.
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Selector CSS
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.
Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll.
Value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:
Selector, Property dan Value ini adalah elemen inti dari CSS.
Komentar
Posting Komentar