Namun saat membuat kode, sulit untuk menyertakan properti CSS yang sama untuk setiap halaman web secara terpisah. Jadi, diperlukan untuk menggunakan solusi di mana satu style sheet dapat dibuat dan kemudian diakses oleh banyak file dengan mudah.

Apa Aturan @import di CSS?

Cara terbaik untuk menyertakan properti gaya CSS adalah dengan menggunakan aturan @import. @import digunakan untuk mengimpor atau mengakses lembar gaya CSS dari lembar gaya lain. Ini mengurangi upaya pengembang karena semua properti yang ditambahkan dalam style sheet yang diimpor diimplementasikan secara langsung hanya dengan menulis @import dan kemudian nama persis dari style sheet tersebut.

Sintaks Aturan @import

Sintaks untuk menambahkan aturan @import untuk mengakses style sheet dari stylesheet lain adalah sebagai berikut:

Aturan @import juga dapat ditambahkan dengan metode berikut:

Cukup, tambahkan nama file stylesheet CSS baik dalam koma terbalik atau tanda kurung bulat dengan ' url 'setelah menulis' @impor ”.

Contoh: Menambahkan Aturan @import

Untuk memahami cara kerja aturan @import, kami menulis cuplikan kode sederhana:

Pada cuplikan kode di atas, terdapat judul

dengan kalimat satu baris sederhana yang ditambahkan dalam dokumen HTML. Kode sederhana ini akan menghasilkan output berikut:

Mari kita membuat stylesheet untuk menentukan beberapa properti CSS yang nantinya dapat diimpor dari file yang digunakan untuk membuat antarmuka halaman web di atas. Kami membuat file lain dan beri nama ' stylesheet ” dengan tipe file dinyatakan sebagai “ css ”, dan cukup tambahkan beberapa properti untuk

heading dan body:

h1 {

warna : midnightblue ;

warna latar belakang : biru langit ;

perataan teks : tengah ;

}

tubuh {

warna latar belakang : biru muda ;

}

Untuk mengakses file stylesheet yang berisi properti style untuk

heading dan body, kita hanya perlu menambahkan aturan @import di salah satu file CSS yang memerlukan styling tersebut.

Menambahkan aturan @import sederhana akan mengimplementasikan semua properti gaya ke antarmuka halaman web tanpa harus mengetikkan properti secara terpisah di setiap halaman web.

Jadi, aturan @import harus ditulis sebagai:

@impor 'stylesheet.css' ;

Menambahkan aturan @import dengan menulis “ url ” dan nama file CSS di dalam tanda kurung juga akan menampilkan hasil yang sama:

@impor url ( stylesheet.css ) ;

Properti yang didefinisikan dalam ' stylesheet ” file diimplementasikan dengan hanya menambahkan sederhana “ @impor ” aturan untuk itu:

Ini cara termudah untuk memasukkan properti CSS ke dalam file tanpa upaya tambahan.

Manfaat Aturan @import di CSS

Aturan @import digunakan secara umum karena alasan berikut:

• Menggunakan Aturan @import mengurangi waktu dan upaya pengembang karena mengimplementasikan semua properti dari style sheet tertentu hanya dengan menulis nama sheet tersebut setelah @import.
• Di aplikasi web yang besar dan kompleks, aturan @import terbukti sangat menguntungkan karena properti gaya yang sama dapat diimplementasikan di banyak file hanya dengan menambahkan nama file style sheet.
• Elemen style sheet seperti header, footer, body, dll dapat disimpan dalam file style sheet terpisah, lalu dengan menggunakan aturan @import, salah satu gaya yang diperlukan dapat diimpor tanpa perlu menambah, menghapus, atau mengomentari properti gaya dari a mengajukan.

Ini merangkum penggunaan aturan @import dan menjelaskan bagaimana aturan ini dianggap sebagai metode terbaik untuk menyertakan CSS.

Kesimpulan

Lembar gaya CSS dapat diimpor atau diakses langsung dari lembar gaya lain dan semua properti dalam lembar gaya yang diimpor langsung diterapkan di halaman web dari file yang telah diimpor. Tidak perlu menulis setiap properti CSS secara terpisah untuk setiap antarmuka halaman web. Yang diperlukan hanyalah menambahkan nama file lembar gaya CSS dengan @import. Dan, ini dianggap sebagai metode terbaik untuk menambahkan CSS.