Memahami Cascading Style Sheets Cascading style sheet (CSS) adalah serangkaian aturan pemformatan yang mengontrol tampilan konten halaman Web. Saat menggunakan CSS untuk memformat halaman, pisahkan konten dari presentasi. Konten halaman (yaitu, kode HTML) berada di file HTML itu sendiri, sedangkan aturan CSS yang menentukan penyajian kode berada di file lain (style sheet eksternal) atau di bagian lain dari dokumen HTML ( biasanya header file). Menggunakan CSS memberi Anda fleksibilitas besar dan kontrol lebih besar atas tampilan halaman Anda, mulai dari posisi tata letak yang tepat hingga font dan gaya tertentu.
CSS memungkinkan Anda mengontrol banyak properti yang tidak dapat dikontrol oleh HTML saja. Misalnya, Anda dapat menentukan ukuran dan unit font yang berbeda (piksel, ukuran titik, dll.) untuk teks yang dipilih. Dengan menggunakan CSS untuk mengatur ukuran font dalam piksel, Anda juga memastikan pendekatan yang lebih konsisten terhadap tata letak dan tampilan halaman di beberapa browser.
Selain memformat teks, Anda dapat menggunakan CSS untuk mengontrol pemformatan dan posisi elemen tingkat blok di halaman Web. Misalnya, Anda dapat mengatur margin dan batas untuk elemen tingkat blok, teks mengambang di sekitar teks lain, dan banyak lagi.
Aturan pemformatan CSS terdiri dari dua bagian: penyeleksi dan deklarasi. Selector adalah istilah yang mengidentifikasi elemen format (seperti P, H1, nama kelas, atau ID), dan deklarasinya digunakan untuk menentukan gaya elemen. Dalam contoh berikut, H1 adalah pemilih dan semua yang ada di antara tanda kurung ({}) adalah deklarasi:
H1 {
ukuran font:16 piksel;
font-keluarga:Helvetica;
berat font:tebal
;
Deklarasi terdiri dari dua bagian: properti (seperti font-family) dan nilai (seperti Helvetica). Aturan CSS di atas menciptakan gaya khusus untuk tag H1: teks dari semua tag H1 yang ditautkan ke gaya ini akan berukuran 16 piksel, font Helvetica, dan tebal.
Istilah cascading mengacu pada kemampuan untuk menerapkan beberapa gaya pada elemen yang sama. Misalnya, Anda dapat membuat satu aturan CSS untuk menerapkan warna, aturan CSS lainnya untuk menerapkan margin, lalu menerapkan keduanya pada teks yang sama di halaman. Gaya yang ditentukan "mengalir" ke elemen di halaman Web Anda, yang pada akhirnya menciptakan desain yang Anda inginkan.
Keuntungan utama CSS adalah menyediakan kemampuan pembaruan yang mudah; ketika Anda memperbarui aturan CSS di satu tempat, pemformatan semua dokumen menggunakan gaya yang ditentukan secara otomatis diperbarui ke gaya baru.
Tipe gaya berikut dapat didefinisikan dalam Dreamweaver:
Aturan CSS khusus (juga disebut gaya kelas) memungkinkan Anda menerapkan properti gaya ke rentang atau blok teks apa pun. (Lihat Menerapkan Gaya Kelas.)
Gaya tag HTML mendefinisikan ulang format tag tertentu (seperti h1). Saat Anda membuat atau mengubah gaya CSS tag h1, semua teks yang diformat dengan tag h1 akan segera diperbarui.
Gaya pemilih CSS (gaya lanjutan) mendefinisikan ulang pemformatan untuk kombinasi elemen tertentu, atau untuk bentuk pemilih lain yang diizinkan CSS (misalnya, terapkan pemilih td h2 setiap kali header h2 muncul dalam sel tabel). Gaya tingkat lanjut juga dapat mendefinisikan ulang pemformatan tag yang berisi atribut id tertentu (misalnya, gaya yang ditentukan oleh #myStyle dapat diterapkan ke semua tag yang berisi pasangan nilai atribut id="myStyle").
Aturan CSS dapat ditemukan di lokasi berikut:
Lembar gaya CSS eksternal adalah serangkaian aturan CSS yang disimpan dalam file CSS (.css) eksternal terpisah (bukan file HTML). Dokumen tersebut ditautkan ke satu atau lebih halaman di situs Web menggunakan link di bagian header file dokumen.
Lembar gaya CSS internal (atau tertanam) adalah serangkaian aturan CSS yang terdapat dalam tag gaya di header dokumen HTML.
Gaya sebaris ditentukan dalam keseluruhan dokumen HTML dalam contoh tag tertentu.
Dreamweaver mengenali gaya yang ditentukan dalam dokumen yang ada selama gaya tersebut mematuhi pedoman gaya CSS.
petunjuk
Untuk menampilkan Panduan Referensi O'Reilly CSS yang disertakan dengan Dreamweaver, pilih Bantuan > Referensi, lalu pilih Referensi O'Reilly CSS dari menu pop-up di panel Referensi.
Menyetel pemformatan HTML secara manual menggantikan pemformatan yang diterapkan melalui CSS. Agar aturan CSS dapat mengontrol pemformatan paragraf, semua pemformatan HTML yang diatur secara manual harus dihapus.
Dreamweaver merender sebagian besar properti gaya yang Anda terapkan langsung di jendela Dokumen. Anda juga dapat melihat pratinjau dokumen di jendela browser untuk melihat bagaimana gaya diterapkan. Beberapa properti gaya CSS tampil berbeda di Microsoft Internet Explorer, Netscape Navigator, Opera, dan Apple Safari, dan beberapa lainnya saat ini tidak didukung oleh browser apa pun.