Berbagai Metode Penggunaan CSS - Belajar CSS #2
Setelah pada seri perdana belajar CSS kita membahas tentang pengenalan CSS (baca: Pengenalan CSS - Belajar CSS #1), seakrang kita membahas berbagai metode penggunaan CSS di blog. Ada tiga jalan yang bisa Anda tempuh yakni seperti berikut ini:
Internal Stylesheet
Pertama Anda bisa menggunakan internal yakni dengan meletakkan kode css di sesi head (diantara <head> dan </head>) dengan menggunakan tag <style>. Misalnya seperti contoh di bawah ini:
External Stylesheet
Alternatif lain adalah Anda bisa menggunakan mode external stylesheet artinya file css Anda ada di luar blog Anda dan kita menggunakan script untuk memanggil file tersebut. File bisa dibuat dengan dreamweaver atau notepad dengan memberikan ekstensi .css saat menyimpan. Tulis kode css pada notepad tanpa dicampuri dengan kode html. Berikut dua metode pemanggilan file yang bisa Anda pilih...
atau
<head>
<style type="text/css">@import url(filecssanda.css)</style>
</head>
Cara ini memiliki kelebihan sebagai berikut:
- Mudah dalam maintance
- Mengurangi berat template
- Mengurangi bandwidth
- Fleksibilitas lebih baik
Inline Stylesheet
Banyak yang berpendapat cara ini bukan cara yang baik dalam urusan SEO. Kode CSS diletkkan bersamaan dengan elemen yang diatur. Contohnya:
<p style="color: #cccccc;">Teks Yang Diatur Dengan CSS</p>
Bagaimana Anda Menimbang?
Mungkin Anda bertanya, apa yang akan saya gunakan... Sampai saat ini saya masih menggunakan metode internal, karena saya hanya gunakan css itu untuk satu blog ini saja. Jadi dengan mudah saya login blogger dan atur css saya. Berbeda bagi yang menggunakan css yang sama untuk banyak blog. Mungkin mereka akan lebih suka dengan mode external karena mereka cukup edit satu file dan itu akan bekerja untuk semua blognya. Sedangkan penggunaan inline, dirasa hemat tempat dan memudahkan saat pengeditan karena css berada dekat dengan objek. Namun sekali lagi banyak yang berpendapat ini buruk untuk SEO.
Tubrukan External dan Internal
Anda bisa menggunakan beberapa metode itu sekaligus. Dan jika ternyata pada penulisan css internal dan external terdapat kode yang bertubrukan. Misal di bagian css internal bertuliskan
dan dibagian file external Anda bertuliskan
Maka h2 akan bekerja dengan warna hitam dari css external (karena kode warna hanya terdapat di css external), sementara perataan teks (text-align) dan ukuran huruf (font-size) yang ada pada kedua mode penulsian css, yang terpanggil adalah css dengan metode Internal Stylesheet.
Besok kita belajar CSS lagi, semoga yang saya berikan sore ini bermanfaat...
Internal Stylesheet
Pertama Anda bisa menggunakan internal yakni dengan meletakkan kode css di sesi head (diantara <head> dan </head>) dengan menggunakan tag <style>. Misalnya seperti contoh di bawah ini:
<head>
<style type="text/css">
body {background:url("images/back40.gif");}
</style>
</head>
<style type="text/css">
body {background:url("images/back40.gif");}
</style>
</head>
External Stylesheet
Alternatif lain adalah Anda bisa menggunakan mode external stylesheet artinya file css Anda ada di luar blog Anda dan kita menggunakan script untuk memanggil file tersebut. File bisa dibuat dengan dreamweaver atau notepad dengan memberikan ekstensi .css saat menyimpan. Tulis kode css pada notepad tanpa dicampuri dengan kode html. Berikut dua metode pemanggilan file yang bisa Anda pilih...
<head>
<link rel="stylesheet" type="text/css" href="filecssanda.css" />
</head>
<link rel="stylesheet" type="text/css" href="filecssanda.css" />
</head>
atau
<head>
<style type="text/css">@import url(filecssanda.css)</style>
</head>
Cara ini memiliki kelebihan sebagai berikut:
- Mudah dalam maintance
- Mengurangi berat template
- Mengurangi bandwidth
- Fleksibilitas lebih baik
Inline Stylesheet
Banyak yang berpendapat cara ini bukan cara yang baik dalam urusan SEO. Kode CSS diletkkan bersamaan dengan elemen yang diatur. Contohnya:
<p style="color: #cccccc;">Teks Yang Diatur Dengan CSS</p>
Bagaimana Anda Menimbang?
Mungkin Anda bertanya, apa yang akan saya gunakan... Sampai saat ini saya masih menggunakan metode internal, karena saya hanya gunakan css itu untuk satu blog ini saja. Jadi dengan mudah saya login blogger dan atur css saya. Berbeda bagi yang menggunakan css yang sama untuk banyak blog. Mungkin mereka akan lebih suka dengan mode external karena mereka cukup edit satu file dan itu akan bekerja untuk semua blognya. Sedangkan penggunaan inline, dirasa hemat tempat dan memudahkan saat pengeditan karena css berada dekat dengan objek. Namun sekali lagi banyak yang berpendapat ini buruk untuk SEO.
Tubrukan External dan Internal
Anda bisa menggunakan beberapa metode itu sekaligus. Dan jika ternyata pada penulisan css internal dan external terdapat kode yang bertubrukan. Misal di bagian css internal bertuliskan
h2
{
text-align:right;
font-size:16pt;
}
{
text-align:right;
font-size:16pt;
}
dan dibagian file external Anda bertuliskan
h2
{
color:#000000;
text-align:left;
font-size:10pt;
}
{
color:#000000;
text-align:left;
font-size:10pt;
}
Maka h2 akan bekerja dengan warna hitam dari css external (karena kode warna hanya terdapat di css external), sementara perataan teks (text-align) dan ukuran huruf (font-size) yang ada pada kedua mode penulsian css, yang terpanggil adalah css dengan metode Internal Stylesheet.
Besok kita belajar CSS lagi, semoga yang saya berikan sore ini bermanfaat...
sama saya juga lagi belajar mas
BalasHapuscara kode menarik nich
patut dicoba
css memang penting
Eamng Css Kreen
BalasHapusdan aku mau cobah dulu aahhh
thx ya tes dulu
trims...saya anggap ini masukan buat saya mas doyok
BalasHapussukses slalu...
sedang belajar "mengendalikan" CSS, hehehe
BalasHapusmas doy, saya masih bingung dengan penggunaan "External Stylesheet" pada CSS !!!
BalasHapussaat hosting saya lagi maintenance blog saya malah tambah lambat !!!
kiranya apa solusinya mas doy 1!!!
iya masdoyok, ane tunggu besok info css yang lebih mantap lagi...CSS 3 yah..
BalasHapusa da pernah coba tp hasilnya g karu2an mas doy, makanya header q aq ganti gambar
BalasHapusokok..tx infony mas doy..
BalasHapusmantab tipsnya Mas doy!!keren mampir mas!!!
BalasHapuswah,,,, perlu saya koreksi mas css punya blog saya... soalnya banyak css sperti yg mas doyok sbutin tadi...
BalasHapusmas, knp penggunakan yang eksternal sering eror ya di blogku ?
BalasHapuswah mulai gak ngerti yg ginian...
BalasHapusnice post mas...
keren tuh kang, tp masih kurang lengkap
BalasHapusSudah Yakin kah, nggak ada yang salah?
BalasHapus@indam
BalasHapuskalau ada pendapat lain :D
kasih masukan saja :D
bagus kalau css lebih ringan gitu kali ya>>>.. jadi sekarang pada menggunakan css aja
BalasHapusmoso sing inline itu gak baik buat seo, aku koq baru tahu ya. hahaha suwun lah pokoke master
BalasHapus@AGUSTA
BalasHapusya begitulah
tapi seo itu selalu menurut menurut dan menurut
aku kan bilang menurut :D
soalnya aku elum ngalamin
tapi coba aj kang agustah tes
pakai css tanpa inline dan inline banyak lalu uji seo template
@ari serba
BalasHapusmau dilengkapin selanjutnya :D
ya memang semuanya pilian :D
BalasHapusada plus minusnya
untuk pengetahuans aja
selama ini sayapun masih ynamsan di internal D
saya nyoba import css malah nambah lambat, mau next-prev, buka link yg lain dia manggil2 juga ke host external css-nya padahal filenya belum diperlukan, barangkali bagus untuk yg templatenya udah keberatan, atau bagus untuk mengurangi berat template, tapi kalau untuk cepat kayaknya enggak juga, punya saya udah disable..
BalasHapus