Deklarasi CSS menentukan format, layout dan tampilan elemen halaman web. Kita bisa menyertakan deklarasi CSS di beberapa tempat dalam file HTML, termasuk metode inline, inner page dan opsional file eksternal. Aturan setting CSS Inline Style ditunjukkan sebagai bagian <head> pakai atribut "style"
Anda boleh menyertakan Internal style sheet di bagian "style" section di daerah <head> . Anda juga dapat membuat link ke file style sheet eksternal di area <head> untuk mengubah Inline style sheet ke external style sheet.
Internal Style Sheet vs External Style Sheet - website files
Jika Anda setting CSS-style untuk setiap teks alinea - bisa dilakukan cukup SEKALI. Misal dengan 5 baris code CSS Inline Style pada file HTML - akibatnya akan ditambahkan style ini ke setiap alinea.BAYANGKAN! – Jika ada 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea di seluruh website blog. Akibatnya : Pemakaian bandwidth akan tiba-tiba membengkak.
Penulisan Inline Style SANGAT TIDAK BAIK untuk SEO karena menjadikan size file HTML menjadi besar melewati batas toleransi standar ukuran dokumen (125KB).
Seperti contoh kasus berikut (Hasil Analisa SEO blog ini) :
Hasil Analisa SEO website design pakai BING Webmaster tools
Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.
Recommended Action
Ensure that the page source does not contain large amounts of CSS or code at the top of the page. Consider moving code and styles into separate files.
SEO Explanation
Search engines may not fully acquire the content on a page if the page is contains a lot of code. Extraneous code can push the content down in the page source making it harder for a search engine crawler to get to. A soft limit of 125 KB is used for guidance to ensure all content & links are available in the page source to be cached by the crawler. This basically means if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.
Instruksi
- Buat file eksternal CSS. Buat file baru dalam teks editor (seperti Notepad) dan simpan dengan ekstensi ".css." - Misalnya, "mypagestyle.css" atau nama yang Anda inginkan. Tambahkan link ke style sheet Anda di bagian <head> halaman HTML.
Buka file HTML. Cari tag penutup "</ head>". Tambahkan snippet dibawah ini sebelum tag penutup tersebut tersebut :
<link rel="stylesheet" type="text/css" href="mypagestyle.css" />
- Ubah nilai atribut "href" jika Anda menyimpan file Anda dengan nama yang berbeda. Kode ini mengasumsikan file CSS disimpan di lokasi sama seperti halaman HTML.
- Cari deklarasi CSS yang ingin Anda pindahkan ke style sheet eksternal. Jika deklarasi style bersifat inline, mereka akan tampak seperti dalam “opening tag” elemen seperti berikut :
<div style="color:#0000ff; background-color:#000;">Here is some text in an element</div>
Ini adalah contoh sederhana di mana ditunjukkan teks berwarna biru (#0000ff) dan latar belakang warna hitam pekat. Sorot teks yang terdaftar diantara tanda kutip (warna teks merah) sebagai atribut "style" copy dan paste ke file CSS Anda. Hapus atribut style dari seluruh elemen HTML ketika Anda “style” tersebut telah disalin ke file style sheet Anda.
- Tambahkan atribut class dan ID elemen HTML Anda untuk mengidentifikasi mereka dalam file CSS. Ubah saja opening "div" tag, kali ini tercakup di dalamnya atribut ID :
<div id="content">Here is some text in an element</div>
Jika elemen sudah ada atribut ID, Anda dapat menggunakannya. Atau, Anda dapat menggunakan atribut class seperti berikut ini :
<div class="content">Here is some text in an element</div>
- Ubah kode CSS untuk merefleksikan atribut ID atau atribut class yang Anda tambahkan. Di sekitar deklarasi CSS yang Anda copy ke file CSS, tempatkan sebuah blok yang mengidentifikasi atau ID yang Anda pilih.
Untuk atribut ID, gunakan sintaks berikut :
#content
{ color:#FF0000; background-color:#000000; }
Dan jika Anda menggunakan atribut class, gunakan sintaks berikut ini :
.content
{ color:#FF0000; background-color:#000000; }
- Copy kode CSS dari internal style sheet ke file eksternal. Jika Anda mempunyai kode dalam “internal CSS section” di area <head> halaman dokumen HTML, maka Anda dapat mentransfer kode tersebut ke file CSS.
Kode tersebut biasanya ditunjukkan sebagai berikut :
<style type="text/css">
div {font-weight:bold;}
</style>
- Copy kode diantara tag style seperti terlihat diatas, dan paste ke file CSS. Hapus semua area style dari halaman HTML setelah berhasil copy. Simpan file. buka halaman di browser untuk menguji.
Tip dan Peringatan
- Penyimpanan deklarasi CSS dalam file terpisah memungkinkan Anda menerapkan style pada elemen ganda (multiple elements) dalam website secara serentak.
- Penggunaan deklarasi Inline Style sheet kurang bermanfaat dan tidak baik untuk SEO. Lebih baik menggunakan file external style. Cara terbaik adalah hindari penggunaan Inline Style Sheet.
- Penyimpanan deklarasi CSS dalam file terpisah memungkinkan Anda menerapkan style pada elemen ganda (multiple elements) dalam website secara serentak.
![](http://www.blogger.com/img/icon_delete13.gif alt="delete icon di web design){kind=icon}
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
