Penulisan CSS bisa dilakukan dengan langsung menempel pada
kode HTML atau diluar kode HTML.
Pertama adalah inline
CSS. Kata inline dalam bahasa Indonesia artinya dalam baris.
Penulisan CSS dengan cara ini memungkinkan seseorang dapat
menggabungkan CSS dan HTML dalam satu baris.
Kelebihannya
- Kita bisa membuat sebuah teks HTML custom yang dapat langsung kita eksekusi dalam satu baris itu. Ini memungkinkan kita dapat membuat tampilan yang berbeda dari setiap baris.
- 2Dengan penulisan CSS dalam baris tidak memerlukan fungsi tag. Tag ini memang sebenarnya lebih memungkinkan kita untuk mendefinisikan setiap kelompok atau elemen.
Kekurangannya
- Dalam segi penulisan kita harus selalu membuat atau menambah kode CSS dalam setiap baris. Sehingga perlu waktu yang lama untuk membuat satu layers halaman web.
- Penggunaan CSS inline tidak cocok untuk penggunaan CSS yang terlalu banyak. Karena tidak akan efisien, malah akan membuat kode yang terlalu panjang dan ribet.
- Banyaknya kode membuat ukuran file HTML menjadi lebih besar karena kode CSS diletakkan dalam satu file.
Contohnya seperti di atas.
Kode CSS berada di dalam script style. Perlakuan setiap baris
tergantung dari komposisi property di dalamnya.
Property dalam CSS bermacam-macam. Mulai dari Text-Style,
Layout, Border (batas), Margin, Padding, Page-layout, Background, dll.
Internal CSS adalah kode yang diletakkan dalam
satu file yang sama dengan kode HTML.
Jadi internal CSS ini selalu ditempatkan pada tag
<style> yang diletakkan diantara header tag <head> </head>.
Penggunaan internal CSS ini akan lebih efisien bila digunakan
untuk sebuah file HTML yang membutuhkan sebuah CSS dan CSS itu dapat diterapkan
untuk banyak elemen pada HTML.
Bila kalian lihat pada template blogger. CSS internal ini
selalu berada dibagian atas di bawah tag <head>. Sedangkan untuk
wordpress style CSS selalu diletakkan terpisah dengan HTML.
Kelebihan
- Memudahkan kita untuk mengelola sebuah halaman web tanpa mengganggu pengaturan atau konfigurasi CSS di halaman lainnya.
- Cocok untuk penggunaan tema yang menggunakan platform blogger.
Kekurangan
- Perlu mengatur setiap style berdasarkan halaman meski sudah menggunakan selector class dan id.
- Programer harus paham betul tentang letak dan penggunaan selector class dan id.
- Ukuran file HTML menjadi lebih besar karena kode CSS diletakkan dalam satu file.
Eksternal CSS adalah peletakan kode CSS yang
diletakan terpisah dengan file HTML. Pemanggilannya dengan cara di linkkan dari
dalam kode HTML.
Dalam file CSS tersebut kita tidak perlu menggunakan tag
<style>. Tetapi kita langsung menuliskan kode CSS yang langsung terhubung
dengan elemen yang terdapat di HTML. Misalkan elemen widget pada HTML yang
memilki symbol sendiri seperti .widget-left, widget-right, dll.
File CSS harus berekstensi (.css).
Pada file HTML kita perlu menambahkan tag <link>. Tag
ini berfungsi sebagai penghubung antara file HTML dan CSS.
Contoh :
<link rel="stylesheet" href="css/file.css" type="text/css" media="all">
Kode href
mengacu/mengarah kepada file CSS yang dituju.
Kelebihan
- Lebih efisien karena semua style CSS dibuat dalam satu file.css.
- Tidak menambah ukuran file HTML, dan menghemat bandwitdth.
- Kebanyakan programmer menggunakan cara eksternal CSS.
- Cocok untuk platform website wordpress.
Kekurangan
- Penggunaan style CSS yang banyak dapat membuat render dalam meload halaman web menjadi lebih lama.
- Programer harus paham betul tentang letak dan penggunaan selector class dan id.
Pemilihan cara penulisan CSS ini memang sebetulnya tergantung
kebutuhan programmer. Saya sendiri terkadang mengunakan cara inline CSS dan
Eksternal CSS. Karena untuk perlakuan setiap widget saya atur sesuai kebutuhan
saya.
Bagian CSS ini adalah bagian yang paling saya suka dalam
belajar bahasa programing. Selain mudah dalam pemahaman dan penerapanya untuk
web, mengotak-atik desain web sangatlah menyenangkan. Tapi perlu berhati-hati
dalam merubah script template. Bila salah dalam penulisan dapat mempengaruhi
kode-kode yang lain.
Ketika saya mulai belajar CSS ini, saya pernah mengalami
eror. Hasilnya dalam tampilan website banyak yang acak-acakkan. Ukuran widget
tidak sesuai dengan ukuran halaman sebenarnya. Dan paling terburuknya loading
halaman website menjadi lama, bahkan muncul lyar blank putih.
Bermanfaat, terimakasih om. Ijin copy :D
ReplyDelete