Tips dan Trik Menggunakan CSS

Percobaan CSS................................

Dapatkan Style Sheets kamu Bekerja Dimanapun Mereka Dilihat


Masalah terbesar dengan menggunakan CSS adalah bahwa hal itu tidak dapat diandalkan atau konsisten di seluruh browser.


Periksa Browser KAMU untuk memperbaiki CSS 
Jika kamu melihat halaman kamu pada Netscape 4.x, dan gaya tidak muncul sama sekali, kamu akan perlu memeriksa preferensi kamu. Bagian frustasi dari ini adalah  jika kamu telah memeriksa "Aktifkan style sheet" (dalam preferensiLanjutan), jika kamu telah menonaktifkan JavaScript Style Sheets juga tidak akan bekerja.



CSS Margin Problems(Masalah Margin pada CSS)


Netscape 4 tidak menangani margin dengan cara yang sama seperti Internet Explorer.Tapi masih mungkin untuk mendapatkan efek yang sama menggunakan tag gaya yang berbeda pada dokumen yang sama. Dan kamu tidak perlu menggunakan JavaScript untuk deteksi browser. Yang perlu  kamu  lakukan adalah menggunakan @ import danCascading untuk keuntungan  kamu .

Sebagai contoh, biasanya, bila kamu menggunakan tag header (h1-h6), ada amoutbesar ruang antara header dan paragraf berikut. Tetapi jika  kamu  menggunakan tag margin untuk memperbaiki ini, kamu akan perlu untuk menulis dua gaya yang berbedauntuk mendapatkannya untuk bekerja dengan benar pada Netscape 4 dan Internet Explorer.


Di Internet Explorer:

h2 {margin-bottom: 0;}
  p {margin-top: 0;}


Dalam Netscape 4
h2 {margin-bottom: 0;}
  p {margin-top:-1em;}


Kemudian, karena Netscape 4 tidak mengakui pernyataan @ import, tetapi mengenali tag <link>,  kamu  dapat menggunakan ini untuk keuntungan  kamu . Pertama menempatkan sifat Netscape dalam file <link>:

<link href="netscape-styles.css" rel="stylesheet" type="text/css">

Kemudian tempat gaya Internet Explorer dalam file @ import (pastikan bahwa itu mengikuti gaya Netscape):

<style type="text/css">
  @ import url (yaitu-styles.css);
  </ style>
Netscape 4 akan hanya membaca style sheet pertama, dan dengan demikian akan membuat teks dengan benar. Internet Explorer akan membaca kedua lembar gaya, tapiakan menggunakan aturan Cascading untuk menentukan yang harus digunakan. Selama gaya impor datang setelah 
terkait gaya, style sheet diimpor akan "menang" dan mereka akan digunakan.

CSS Background Colors


Latar Belakang Warna CSS

Sangat mudah untuk menambahkan warna latar belakang paragraf menggunakan CSS.Paste kode di bawah  ke dalam halaman Web kamu:


<p style="background-color : #cccccc;"> This paragraph should have a grey background color. But if you view it in Netscape, the grey color will only surround the text itself, rather than the entire space of the paragraph, as it does in Internet Explorer. </p>

Jika 
kamu  hanya menambah properti gaya sederhana, Netscape akan memperpanjanglatar belakang ke tepi dari "kotak" yang paragraf. 
kamu  perlu memberitahu Netscapebahwa ada perbatasan, tetapi jika 
kamu
 mengatur properti perbatasan untuk "none", perbatasan tidak akan ditampilkan.






<p style="background-color : #cccccc; border : none;">For example, in this paragraph.</p>



CSS Drop Caps



Cara yang paling logis untuk melakukan drop-tutup akan menggunakan "pertama-huruf"pseudo-elemen. Untuk mengatur drop-tutup menggunakan ini, 
kamu
 mungkin menulisgaya seperti ini. Ketik berikut dan tempatkan dalam elemen <style> </ style> di bagian atas halaman Web Anda:






p.introduction:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 width : 1em;
 }



Kemudian paste ke dalam tubuh dokumen kamu



<p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>

<p class="introduction"> ayat ini memiliki "pengenalan" kelas. Jika browser 
kamu  mendukung pseudo-class "pertama-huruf", huruf pertama akan menjadi drop-tutup. </ p>







Tapi kemungkinan besar, browser kamu tidak mendukung pseudo-kelas. kamu masih bisa berpura-pura di beberapa browser dengan menggunakan tag <span> sekitar huruf pertama dalam paragraf. Sebagai contoh:

<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">

Coba paste berikut ke dalam editor HTML kamu:


<span style="font-size : 200%; font-weight : bold; float : left; width : .75em;">T</span>his paragraph has a drop-cap on the first character that should be visible to browsers like Internet Explorer 4 and 5. It will work in Netscape 4 as well, but you need to play around with the width of your letter to find the right size. <br clear="all" />
atau..............................coba yang ini

<span style="font-size : 200%; font-weight : bold; float : left; width : .75em; background-color : #cc0000; color : #cccccc;">Y</span>ou can even play with other style attributes on your drop-cap. Just remember to test in both Internet Explorer and Netscape, so you're not surprised by how your page looks. <br clear="all" />



Percobaan CSS................................