Belajar menggunakan CSS

Secara garis besar, ada 3 jenis cara untuk menggunakan CSS dalam sebuah halaman HTML:
  • External style sheet
  • Internal style sheet
  • Inline style
Berikut adalah penjelasan singkat ketiga jenis di atas ditambah satu kombinasi.
  1. External style sheet
    External style sheet cocok untuk style yang akan diaplikasikan pada beberapa halaman. Dengan external style sheet, kita dapat merubah tampilan seluruh Web site dengan merubah satu file. Setiap halaman must link to the style sheet usingarus terhubung dengan style sheet menggunakan kode "link". Kode "link" akan berada di dalam bagian head seperti contoh di bawah ini:
    External style sheet dapat dibuat dengan berbagai teks editor. File-nya tidak boleh mengandung kode HTML dan file-nya disimpan dengan ekstension .css seperti contoh di bawah ini.
    hr {color:sienna}
    p {margin-left:20px}
    body {background-image:url("images/back40.gif")}
    Jangan membuat spasi antara nilai property dengan unit "margin-left:20 px" (seharusnya seperti ini "margin-left:20px") karena akan menimbulkan masalah pada browser firefox dan opera.
  2. Internal style sheet
    Internal style sheet digunakan ketika sebuah dokumen tunggal memiliki style yang unik/spesifik. Kita dapat menetapkan internal style di bagian head sebuah halaman HTML dengan menggunakan kode "style", seperti contoh di bawah ini:
  3. Inline style
    Untuk menyisipkan inline styles kita harus menggunakan atribut dengan kode yang relevan. Atribut style dapat mengandung berbagi CSS property. Contoh di bawah ini memperlihatkan cara merubah warna dan margin kiri pada sebuah paragraf:
  4. Multiple Style Sheets
    Jika beberapa property telah diset untuk selector yang sama tapi untuk style yang berbeda, nilai untuk property akan diambil dari style yang lebih spesifik.
    Sebagai contoh, sebuah external style sheet mengandung beberapa property untuk selector h3 :
    h3
    {
    color:red;
    text-align:left;
    font-size:8pt
    }
    Dan sebuah internal style sheet juga memiliki property untuk selector h3 sebagai berikut:
    h3
    {
    text-align:right;
    font-size:20pt
    }
    Jika sebuah halaman dengan internal style sheet juga terhubung dengan external style sheet di atas, maka property untuk selector h3 akan menjadi seperti di bawah ini:
    color:red;
    text-align:right;
    font-size:20pt
    Dimana, nilai property warna diambil dari external style sheet sementara text-alignment dan ukuran huruf digantikan oleh nilai dari internal style sheet.

0 comments: