Cara Menggunakan CSS Eksternal
CSS eksternal adalah cara yang sangat umum dan efektif untuk memisahkan style dari HTML, membuatnya lebih terorganisir, dan memungkinkan Anda untuk menggunakannya di berbagai halaman web. Berikut adalah panduan langkah demi langkah tentang cara menggunakan CSS eksternal:
1. Buat File CSS
- Buat file baru dengan ekstensi .css. Anda dapat memberi nama file apa pun yang Anda inginkan, tetapi biasanya baik untuk menggunakan nama yang mencerminkan kontennya, seperti
style.css. - Tuliskan kode CSS Anda di dalam file ini. Anda dapat menggunakan semua sintaks CSS standar untuk mendefinisikan style elemen HTML Anda.
2. Hubungkan File CSS ke HTML
- Buka file HTML Anda.
- Tambahkan tag
<link>ke dalam bagian<head>HTML Anda. Tag ini menghubungkan file CSS Anda ke HTML.
Judul Halaman
- Ganti
style.cssdengan nama file CSS Anda. - Atribut
rel="stylesheet"menginformasikan browser bahwa file tersebut berisi CSS. - Atribut
hrefmenunjuk ke lokasi file CSS Anda. Pastikan untuk menyertakan path yang benar, baik path absolut maupun relatif terhadap file HTML Anda.
3. Gunakan Style Anda
Sekarang Anda dapat menggunakan style yang Anda definisikan dalam CSS eksternal Anda di elemen HTML Anda.
Sebagai contoh, jika Anda memiliki style berikut dalam style.css:
h1 {
color: blue;
text-align: center;
}
maka semua tag <h1> di HTML Anda akan berwarna biru dan teksnya akan berada di tengah.
Keuntungan Menggunakan CSS Eksternal:
- Organisasi: Memisahkan style dari HTML membuat kode Anda lebih bersih dan mudah diorganisir.
- Reusabilitas: Anda dapat menggunakan satu file CSS untuk banyak halaman web.
- Efisiensi: Browser hanya perlu mengunduh file CSS sekali, lalu dapat menggunakannya untuk semua halaman yang menggunakan file itu.
- Kemampuan Pemeliharaan: Lebih mudah untuk mengedit dan memelihara style ketika semuanya ada di satu tempat.
- Kerjasama Tim: Memudahkan untuk bekerja dalam tim, dengan setiap pengembang dapat fokus pada bagian kode yang berbeda.
Dengan menggunakan CSS eksternal, Anda dapat membuat website yang lebih menarik, terorganisir, dan mudah dipelihara.
