CSS Merupakan singkatan dari Cascading Style Sheet. Dengan CSS, Anda bisa memisahkan antara desain tampilan website dengan konten/isi website. HTML/xHTML sebenernya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML <i>Teks miring</i>, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML <b>halo semua</b>, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.
Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :
<i><b>teks ini blod dan italic</b></i>
Tapi bagaimana jika anda memiliki banyak teks yang harus dicetak tebal sekaligus miring? Apakah dengan menuliskan tag HTML seperti contoh diatas? Bisa saja tapi sangat tidak direkomandasikan dan tidak ada orang yang melakukan hal seperti itu. Selain karena harus mengetikkan berulang-ulang, juga akan memperbesar ukuran file HTML. Solusi untuk permasalahan diatas adalah dengan menggunakan CSS.
CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.
Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:
Internal StyleSheet
Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag <head> dan tag </head>. Formatnya bisa seperti contoh dibawah:
<head>
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>
Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>
Inline Style
Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:
<p style="color:#ff0000;">teks warna merah </p>
Hasil dari kode diatas adalah:teks warna merah
Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag <p>), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.
External StyleSheet
External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:
<link rel="stylesheet" type="text/css" href="letak file .css" />
Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:<style type="text/css">
@import url(letak file .css)
</style>
Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:@import url(letak file .css)
</style>
- Maintenance kode CSS lebih mudah
- Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
- Dapat menghemat bandwidth
Yang mana yang lebih baik ?
Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi saya sendiri lebih menyukai menggunakan External StyleSheet karena beberapa alasan yang sudah disebutkan tadi.
Bagaimana jika ketiga cara diatas digabungkan?Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas:
- Pertama ada pada Inline Style,
- Kedua adalah Inline StyleSheet
- dan terakhir adalah External StyleSheet.
Maksud dari prioritas disini adalah jika pada External StyleSheet anda mengetikkan kode CSS untuk menampilkan teks warna merah, sedangkan di Internal StyleSheet Anda mengetikkan kode CSS untuk menampilkan teks warna biru, maka hasil yang tampil adalah teks warna biru yang ada di Internal StyleSheet sebagai prioritas.
Tampilan berbeda di tiap web browser
Semakin Anda mendalami CSS maka Anda akan semakin sadar bahwa setiap browser mempunyai cara berbeda dalam menterjemahkan kode CSS. Inilah yang membuat sedikit kerja keras bagi para web designer untuk membuat tampilan sebuah halaman bisa tampil sama pada browser yang berbeda.