Cara Menggunakan External CSS Keyword
External CSS Keyword adalah sebuah metode untuk mengakses dan menggunakan kode CSS yang tersimpan di dalam sebuah file terpisah. Metode ini memungkinkan Anda untuk memisahkan kode CSS dari HTML, yang akan membuat kode Anda lebih terorganisir, mudah diubah, dan lebih efisien.
Berikut langkah-langkah untuk menggunakan external CSS keyword:
1. Membuat File CSS
Pertama, Anda perlu membuat sebuah file CSS baru dengan ekstensi .css. Anda dapat menggunakan editor teks biasa atau IDE untuk membuat file ini.
Contoh:
/* style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
text-align: justify;
}
2. Menyisipkan Link ke File CSS
Selanjutnya, Anda perlu menyisipkan link ke file CSS Anda di dalam bagian <head> dari dokumen HTML Anda. Gunakan tag <link> dengan atribut rel="stylesheet" dan href yang menunjuk ke lokasi file CSS.
Contoh:
Contoh External CSS
Judul Halaman
Ini adalah contoh paragraf.
3. Menjalankan Kode HTML
Setelah Anda menyimpan kedua file (HTML dan CSS), buka file HTML di browser Anda. Anda akan melihat bahwa style yang Anda definisikan di file CSS akan diterapkan pada elemen HTML yang sesuai.
Keuntungan Menggunakan External CSS Keyword
- Organisasi Kode: Memisahkan kode CSS dari HTML membuat kode Anda lebih terstruktur dan mudah dibaca.
- Efisiensi: Browser hanya perlu mengunduh file CSS sekali, dan kemudian dapat menggunakan style yang sama untuk semua halaman yang menggunakan file CSS tersebut.
- Kemudahan Modifikasi: Anda dapat mengubah style dengan mudah tanpa harus mengubah kode HTML.
- Penggunaan Kembali: Anda dapat menggunakan file CSS yang sama untuk beberapa halaman web.
Dengan menggunakan External CSS Keyword, Anda dapat membuat kode website Anda lebih terstruktur, efisien, dan mudah diubah.
