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:
<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...
0 comments:
Post a Comment