Manfaat Utama Cascading Style Sheets

click fraud protection

Lembar gaya berjenjang memiliki banyak manfaat. Mereka memungkinkan Anda untuk menggunakan lembar gaya yang sama di seluruh situs web Anda. Ada dua cara untuk melakukannya:

  • menghubungkan dengan elemen LINK
  • mengimpor dengan perintah @import

Keuntungan dan Kerugian dari Style Sheets Eksternal

Salah satu hal terbaik tentang lembar gaya berjenjang adalah Anda dapat menggunakannya untuk menjaga situs Anda tetap konsisten. Cara termudah untuk melakukannya adalah dengan menautkan atau mengimpor lembar gaya eksternal. Jika Anda menggunakan lembar gaya eksternal yang sama untuk setiap halaman situs Anda, Anda dapat yakin bahwa semua halaman akan memiliki hal yang sama gaya.

Beberapa keuntungan menggunakan style sheet eksternal termasuk Anda dapat mengontrol tampilan dan nuansa beberapa dokumen sekaligus. Ini sangat berguna jika Anda bekerja dengan tim orang untuk membuat situs web Anda. Banyak aturan gaya mungkin sulit diingat, dan meskipun Anda mungkin memiliki panduan gaya cetak, itu membosankan untuk dimiliki untuk terus-menerus membolak-baliknya untuk menentukan apakah contoh teks akan ditulis dalam font Arial 12 poin atau 14 poin Kurir.

instagram viewer

Anda dapat membuat kelas gaya yang kemudian dapat digunakan pada banyak elemen HTML yang berbeda. Jika Anda sering menggunakan font khusus Wingdings untuk memberi penekanan pada berbagai hal di halaman Anda, Anda dapat menggunakan Wingdings kelas yang Anda atur di lembar gaya Anda untuk membuatnya daripada mendefinisikan gaya tertentu untuk setiap instance dari tekanan.

Anda dapat dengan mudah mengelompokkan gaya Anda agar lebih efisien. Semua metode pengelompokan yang tersedia untuk CSS dapat digunakan di lembar gaya eksternal, dan ini memberi Anda lebih banyak kontrol dan fleksibilitas pada halaman Anda.

Yang mengatakan, ada juga alasan yang sangat bagus untuk tidak menggunakan style sheet eksternal. Pertama, mereka dapat meningkatkan waktu pengunduhan jika Anda menautkan ke banyak dari mereka.

Setiap kali Anda membuat file CSS baru dan menautkan atau mengimpornya ke dalam dokumen Anda, itu memerlukan browser Web untuk membuat panggilan lain ke server Web untuk mendapatkan file tersebut. Dan panggilan server memperlambat waktu pemuatan halaman.

Jika Anda hanya memiliki sedikit gaya, gaya tersebut dapat meningkatkan kerumitan halaman Anda. Karena gaya tidak terlihat langsung di HTML, siapa pun yang melihat halaman harus mendapatkan dokumen lain (file CSS) untuk mencari tahu apa yang terjadi.

Cara Membuat Lembar Gaya Eksternal

Lembar gaya eksternal ditulis dengan cara yang sama seperti lembar gaya tertanam dan sebaris. Tapi yang kamu butuhkan untuk menulis adalah gayanya pemilih dan pernyataan. Anda tidak memerlukan elemen atau atribut GAYA dalam dokumen.

Seperti yang lainnya CSS, sintaks untuk aturan adalah:

pemilih { properti: nilai; }

Aturan-aturan ini ditulis ke file teks dengan ekstensi.

.css
. Misalnya, Anda dapat memberi nama lembar gaya Anda.
gaya.css. 

Menautkan Dokumen CSS

Untuk menautkan lembar gaya, Anda menggunakan elemen LINK. Ini memiliki atribut rel dan href. Atribut rel memberi tahu browser apa yang Anda tautkan (dalam hal ini style sheet) dan atribut href menyimpan path ke file CSS.

Ada juga tipe atribut opsional yang dapat Anda gunakan untuk menentukan tipe MIME dari dokumen tertaut. Ini tidak diperlukan dalam HTML5, tetapi harus digunakan dalam dokumen HTML 4.

Berikut adalah kode yang akan Anda gunakan untuk menautkan lembar gaya CSS yang disebut styles.css:

Dan dalam dokumen HTML 4 Anda akan menulis:

ketik="teks/css">

Mengimpor Lembar Gaya CSS

Lembar gaya yang diimpor ditempatkan di dalam elemen STYLE. Anda kemudian dapat menggunakan gaya yang disematkan juga jika Anda mau. Anda juga dapat menyertakan gaya yang diimpor di dalam lembar gaya tertaut. Di dalam dokumen STYLE atau CSS, tulis:

@impor url(' http://www.yoursite.com/styles.css'); 
instagram story viewer