Mengenal dasar-dasar CSS. CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang mempunyai fungsi untuk menghias dan mengatur gaya tampilan/layout suatu halaman web agar terlihat lebih elegan dan menarik. Dalam membuat sebuah website, kita akan sangat memerlukan penggunaan CSS (Cascading style sheet). Ini berfungsi untuk membuat sebuah antarmuka atau tampilan website yang bisa menarik. Tanpa menggunakan css kemungkinan hasil websitemu akan terlihat buruk dan tidak user friendly. Menggunakan CSS juga bisa mengantikan beberapa fungsi penggunaan gambar yang akan membuat loading websitemu lebih cepat. Ketika kamu sudah menguasai penggunaan (X)HTML maka untuk memperkuat kemampuanmu dibidang web desain, kamu perlu mempelajari penggunaan CSS lebih dalam lagi. Penggunaan CSS file juga dapat memungkinkan kamu memisahkan konten situs web (X)HTML dari style. Seperti biasanya, kamu menggunakan file (X)HTML untuk mengatur konten, tapi semua presentasi (seperti font, warna, background, border, format teks, efek link & seterusnya) dibuat dalam file CSS. Tentu ini akan sangat mempermudah dalam mendesain sebuah website.
Mengenal dasar-dasar css
Dalam hal ini kita memiliki beberapa pilihan tentang bagaimana menggunakan CSS, baik secara internal maupun eksternal. 
Baca Juga :
Internal Stylesheet
Pertama kita akan coba mengeksplorasi metode internal. Dengan cara ini kamu hanya menempatkan kode CSS dalam tag pada setiap (X)HTML file yang ingin kamu berikan style dengan CSS. Mari kita lihat kode dibawah ini :
<html> <head> <title><title> <style type="text/css"> CSS Content Goes Here </style> </head> <body> </body> </html>
Dengan metode ini setiap (X) HTML file harus berisi kode CSS yang diperlukan untuk style halaman. Ini artinya setiap perubahan yang ingin kamu buat pada satu halaman, perubahan tersebut juga harus dilakukan untuk semua halaman. Metode ini akan sangat baik digunakan jika kamu hanya perlu merbubah tampilan (style) pada satu halaman saja atau baik digunakan jika kamu ingin membuat tampilan setiap halaman menjadi berbeda-beda. Tapi metode ini akan sangat merepotkan jika kamu mempunyai halaman website yang sangat banyak.
External Stylesheet.
Pada tahap berikutnya kita akan mengeksplorasi metode eksternal. Sebuah file CSS eksternal dapat dibuat dengan teks atau HTML editor apapun seperti Notepad ++, Sublime Text, Dreamweaver. Maksudnya kita akan membuat sebuah file CSS tidak berisi kode (X) HTML, hanya file CSS. Kamu cuma perlu menyimpannya dengan ekstensi file.css. Kemudian kamu dapat memasukan link file css kebagian head setiap (X) HTML file yang ingin kamu berikan style atau antarmuka yang sesuai. Berikut contoh kode yang bisa kamu gunakan saat menempatkan file CSS ke file HTML :
<link rel="stylesheet" type="text/css" href="File path/stylesheet.css" />
Atau kamu juga bisa menggunakan metode @import seperti contoh berikut :
<style type="text/css">@import url(File path/stylesheet.css);</style>
Kode diatas bisa kamu tempatkan didalam tag head seperti contoh berikut ini :
<html> <head> <title><title> <link rel="stylesheet" type="text/css" href="File path/stylesheet.css" /> </head> <body> </body> </html>
Atau
<html> <head> <title><title> <style type="text/css">@import url(File path/stylesheet.css);</style> </head> <body> </body> </html>
Dengan menggunakan eksternal style sheet, semua file (X) HTML yang kamu punya hanya perlu di-link-an ke satu file CSS untuk style sebuah halaman. Ini berarti, ketika kamu ingin mengubah desain dari semua halaman, kamu hanya perlu mengedit satu file CSS untuk membuat perubahan global keseluruh situs web kamu. Berikut adalah beberapa alasan kenapa metode ini lebih baik.
- Maintenance (Pemeliharaan) lebih mudah
- Mengurangi Ukuran File
- Mengurangi penggunaan bandwidth
- Peningkatan fleksibilitas / Lebih fleksibel
Menarik bukan? Atau kamu dapat ide lain?
Mari kita bahas lebih lengkap lagi. Dalam paragraf sebelumnya, kita sudah membahas bagaimana untuk menge-link-an ke file css baik secara internal maupun eksternal. Jika kamu mengerti, itu artinya apa yang kami jelaskan dapat dipahami dan kami sudah melakukan pekerjaan dengan baik. Jika tidak, jangan khawatir, ada jalan panjang yang bisa dilakukan sebelum kita menyelesaikannya. Dengan asumsi kamu sudah bisa menangkap penjelasan diatas, kamu mungkin akan bertanya, apakah saya dapat melakukan keduanya, menggunakan metode internal atau eksternal? Jawabannya adalah ya. Kamu dapat menggunakan metode internal atau eksternal. Tapi, tunggu dulu, sekarang saatnya kita membahas metode ketiga. Ya, inline style!
Inline Styles
Penggunaan metode ini akan mengalahkan tujuan kita menggunakan CSS di tempat pertama. Inline style didefinisikan tepat di file (X) HTML sepanjang sisi elemen yang kamu ingin beri style. Lihat contoh di bawah ini.
Some red text
Some red text
Inline styles TIDAK akan meberikan pengguna untuk mengubah elemen style atau teks diformat dengan cara lainnya, apa yang akan kamu lakukan pada file css tidak akan punya pengaruh ke teks tersebut.
Jadi, mana yang lebih baik?
Jadi, serakgn kita sudah mendapatkan bagaimana cara memasukan CSS ke dalam file (X) HTML, mungkin kamu akan bertanya-tanya, metode manakan yang lebih baik? Bagaimana jika saya menggunakan lebih dari satu metode dengan cara yang berbeda untuk menge-load ke browser saya? Semua macam metode akan berurutan menjadi “pseudo” stylesheet baru dengan urutan sebagai berikut:
- Inline Style (dalam elemen (X) HTML)
- Internal Style Sheet (dalam tag)
- External Style Sheet
Jika ditanya mana metode mana yang lebih baik, itu tergantung pada apa yang ingin kamu lakukan. Jika kamu hanya memiliki satu file untuk style antarmuka kemudian menempatkannya dalam tag(internal), ini akan bekerja dengan baik. Jika kamu berencana menempatkan style dibeberapa file (X)HTML, maka metode eksternal file adalah cara yang lebih baik, karena ini akan mempermudah dan mengurangi waktumu untuk mengedit style css satu demi satu. Memilih antara metode atau @import itu benar-benar terserah pada kamu sendiri. Tapi, disini kami hanya memberi tahu kalau metode @import melakukan pembacaan file CSS beberapa detik lebih lama di Internet Explorer ketimbang menggunakan .
Pengguna Penyandang Cacat
Penggunaan external style sheets juga dapat menguntungkan pengguna yang menderita cacat. Misalnya, pengguna dapat mematikan stylesheet atau mengganti salah satu style attribute yang sudah ada untuk meningkatkan ukuran teks, mengubah warna dan sebagainya.
Masalah Browser
Kamu akan menemukan banyak masalah yang terjadi ketika menggali lebih jauh ke dalam dunia CSS dimana semua browser tidak diciptakan sama. Hasil dari kode CSS mungkin dan akan membuat hasil yang berbeda di berbagai browser, ini akan menyebabkan kamu sakit kepala atau mungkin mengeluarkan umpatan kepada developer browser kenapa tidak membuatnya sama. Ini yang sering saya alami, kode css akan berhasil pada browser A, tapi belum tentu bisa dijalankan dan mendapatkan hasil yang sesuai pada browser B. Ini sangat menyebalkan sekali, tapi mau tidak mau kita harus menerimanya. Ini adalah penjelasan paling dasar dalam penggunaan CSS, kami harap apa yang kami jelaskan pada artikel ini dapat dipahami dengan mudah, jika kamu ada pertanyaan, silahkan tuliskan pada kolom komentar.
