Pengenalan CSS – Belajar membuat Website (sambungan)

Istilah CSS

CSS singkatan dari Cascading Style Sheets yang secara harafiah berarti lembaran gaya yang mengalir ke bawah. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup dalam hal ini HTML. Selain itu, CSS juga bisa digunakan untuk mengatur style dokumen markup lain seperti XML, SVG dan XUL.

Dengan kita menggunakan CSS, akan banyak keuntungan yang dapat kita peroleh, di antaranya:
1.    Memisahkan pembuatan dokumen (CSS dan HTML)
2.    Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web.
3.    Akses Web lebih cepat di-loading (mempercepat pembacaan HTML)
4.    Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang.
5.    Ringan pada filesize/Bandwith lebih kecil.
6.    Dapat digunakan pada semua web browser.

fa640f4b5e2c1c525aff71423b093398

Semua website dinamis sekarang ini telah menggunakan CSS sebagai styling dokumennya, jika anda menggunakan developer tool pada browser anda, anda dapat melihat bagaimana sebuah halaman website di-render. Setidaknya ada elemen HTML dan CSS didalamnya.capture

Penggunaan CSS

Dalam menggunakan CSS biasanya ada dua cara yaitu eksternal dan internal.

Internal

Cara ini adalah dengan menyisipkan scrip CSS ke dalam dokumen HTML. Untuk penggunaan internal digunakan elemen “style” untuk mendeskripsikan gaya yang ingin digunakan. Cara ini sebenarnya ada dua model lagi, yaitu dengan menyisipkan script CSS pada bagian tersendiri didalam dokumen atau dengan cara menyisipkan style pada masing-masing “class” yang digunakan oleh elemen HTML.

cara pertama:

image-3

Cara kedua:

image-5

Jika diperhatikan, untuk cara internal ini, akan lebih efisien jika menggunakan cara kedua, sebab anda hanya akan perlu memanggil kelas untuk setiap elemen yang membutuhkan styling, sebab anda sudah mendeskripsikan style anda pada bagian awal. Catatan: penulisan style seperti cara kedua ditempatkan dibagian sebelum tag </head> sehingga ketika halaman anda dibuka, style ini di-load terlebih dahulu.  Setelah pendefinisian style, maka anda dapat memanggilnya menggunakan elemen “class” untuk menggunakan style tersebut. Bayangkan jika anda harus menggunakan style yang sama untuk puluhan bahkan ratusan elemen didalam HTML, akan sangat menyulitkan jika harus menuliskannya satu per satu.

Eksternal

Cara ini lebih efisien dibandingkan cara internal. Cara ini menempatkan script CSS didalam file yang berbeda dengan dokumen HTML. Perhatikan gambar berikut;

image-6

Pada Gambar diatas, terdapat dua file didalam kotak merah yaitu dokumen HTML dan file CSS yang dipanggil menggunakan tag <link ……/>. Didalam tag ini terdapat link ke file eksternal dengan ekstensi .css yang berisi script CSS, dan kemudian digunakan didalam HTML dengan memanggil elemen CSS ke dalam “class” atau “id” HTML.

image-8

Pada gambar ini adalah contoh script CSS yang kemudian dipanggil ke dalam dokumen HTML, jika diperhatikan terdapat elemen “.text” yang dipanggil pada elemen <h1> didalam dokumen HTML seperti pada gambar sebelumnya.

Catatan: Didalam CSS, titik (.) seperti yang digunakan pada “.text” menunjukkan penggunaannya untuk kelas dalam HTML, sedangkan untuk elemen ID didalam html menggunakan tanda pagar “#”, contohnya #text, jika menggunakan elemen “id=”text” didalam HTML.

Sekian dulu untuk artikel kali ini, jika ada pertanyaan, saran atau koreksi, silahkan tinggalkan komentar dibawah.

Salam, r4ndieL

r4ndiel

Leave a Reply

Your email address will not be published. Required fields are marked *