Website sekarang ini sudah menjadi kebutuhan dasar untuk keperluan bisnis, setiap bisnis diharuskan memiliki website. Website menjadi media untuk branding dan promosi agar semakin dikenal oleh banyak orang. Menurut data dari internetlivestats.com sampai April 2020 tercatat sudah ada 1.7 milyar website active di dunia ini dan angkanya akan selalu bertambah setiap waktu.
Dalam pembuatan website, ada tiga fondasi penting dalam proses pembuatannya. Yang pertama adalah HTML yang sudah Kami bahas pada belajar HTML dasar untuk pemula di artikel sebelumnya. Fondasi kedua adalah CSS dan yang terakhir JavaScript. Nah agar lebih jelasnya pada kesempatan kali ini Kami akan membahas khusus mengenai CSS.
Apa Itu CSS
Bagi Anda yang belum tahu, CSS merupakan kepanjangan dari Cascading Style Sheets. CSS adalah bahasa pemrograman dalam website yang memiliki fungsi untuk mendesain tampilan website agar lebih menarik. Dengan menggunakan CSS Anda bisa bebas mengatur jenis font, ukuran font, color, margin, padding, background, comment, link dan masih banyak lainnya.
Untuk saat ini CSS memiliki 3 versi yaitu CSS 1, CSS 2 dan CSS 3. CSS pertama kali muncul pada tahun 1996 yang keluarkan oleh World Wide Web Consortium (W3C) dan sekarang ini sudah versi ketiga. CSS 3 mendukung teknologi yang lebih canggih salah satunya hadirnya fitur animasi pada halaman website.
Jenis CSS
Dalam proses implementasi penulisan kode CSS, terdapat 3 jenis CSS yang bisa Anda praktekkan. Setiap metode penulisan memiliki kelebihan, kekurangan dan juga kegunaannya yang berbeda-beda. Nah berikut 3 jenis CSS yang perlu Anda tahu.
- Internal CSS
- External CSS
- Inline CSS
Tidak perlu bingung apa perbedaan dari tiga jenis CSS tersebut, karena Kami akan membahasnya secara lengkap dan detail pada pembahasan dibawah ini:
1. Internal CSS
Jenis CSS yang pertama yang akan kita bahas adalah Internal CSS. Internal CSS adalah kode CSS yang ditulis dalam tag <style> dan lokasinya berada pada bagian atas header file HTML. Internal CSS digunakan untuk membuat custom khusus dalam satu halaman website sehingga halaman lain tidak terpengaruh.
Custom halaman dengan internal CSS ini cocok dipakai untuk Anda yang memiliki website dengan tampilan yang berbeda-beda. Jadi untuk Anda yang ingin membuat website unik dengan berbagai tampilan halaman website yang berbeda, maka inline CSS ini pilihan yang paling benar.
Kelebihan Internal CSS
- Mudah dalam melakukan editing tiap halaman website
- Tidak perlu melakukan upload file CSS karena masuk dalam file HTML
- Class dan ID bisa dipakai oleh internal stylesheet
- Mudah saat memperbaiki error CSS website
Kekurangan Internal CSS
- Kurang efisien untuk penggunaan beberapa halaman website yang sama karena Anda harus menuliskan ulang.
- Performa website menjadi lebih lambat karena setiap halaman memiliki CSS sendiri.
- Ukuran file menjadi lebih besar karena setiap halaman memiliki CSS sendiri.
Contoh Internal CSS
Agar lebih jelasnya berikut Kami berikan contoh penulisan kode pada Inline CSS pada file HTML.
<!DOCTYPE html> <html> <head> <title>Internal CSS dalam Website</title> <!-- contoh internal css dalam tag head --> <style type="text/css"> h1 { text-align: center; font-family: arial; color: orange; } h2 { text-align: left; font-family: calibri; color: black; } </style> </head> <body> <!-- contoh internal css dalam tag body --> <style type="text/css"> h1 { text-align: center; font-family: arial; color: orange; } h2 { text-align: left; font-family: calibri; color: black; } </style> <h1>Qwords.com</h1> <h2>Contoh Internal CSS</h2> </body> </html>
Bagaimana mudah bukan untuk mempraktekan caranya?
2. External CSS
Jenis CSS yang kedua adalah External CSS. External CSS adalah kode CSS yang penulisannya dipisah dengan file HTML. Jadi file CSS ditulis pada file sendiri dengan ekstensi .css. File External CSS biasa dituliskan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css.
Penggunaan External CSS lebih simple dan sederhana karena tidak perlu menuliskan CSS dalam setiap file HTML. Nah berikut kelebihan dan kekurangan serta contoh penulisan External CSS.
Kelebihan External CSS
- Ukuran file HTML menjadi lebih kecil
- Penulisan kode HTML menjadi lebih rapi
- Loading website menjadi lebih cepat
- File CSS bisa digunakan untuk beberapa halaman website berbeda
Kekurangan External CSS
- Tidak cocok untuk halaman website yang membutuhkan halaman custom
- Halaman website rawan berantakan saat file CSS gagal load dengan sempurna sehingga tampilan website berantakan.
Contoh External CSS
Untuk lebih jelasnya silahkan lihat pada contoh external CSS berikut ini:
h1 { text-align: center; font-family: arial; color: orange; } h2 { text-align: left; font-family: calibri; color: orange; } h1 { text-align: center; font-family: arial; color: orange; } h2 { text-align: left; font-family: calibri; color: orange; }
Simpan file External CSS tersebut dengan nama style.css. Untuk bisa menggunakannya Anda perlu memanggil dengan kode tag <link>, berikut caranya.
<link rel="stylesheet" type="text/css" href="style.css">
Tag <link> adalah element untuk merujuk file CSS. rel=”stylesheet” menunjukan file yang dirujuk adalah stylesheet. type=”text/css” menunjukan tipe dari file dan yang terakhir href=”style.css” adalah nama file dari CSS External yang sudah dibuat.
Berikut contoh penempatan kode pada file HTML:
<!DOCTYPE html> <html> <head> <title>Internal CSS dalam Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Qwords.com</h1> <h2>Contoh External CSS</h2> </body> </html>
3. Inline CSS
Nah yang terakhir adalah Inline CSS. Inline CSS adalah memasukan kode CSS yang ditulis secara langsung pada setiap atribut HTML. Jadi setiap atribut memiliki style CSS yang berbeda tergantung kebutuhan .
Inline CSS ini tergolong kurang efisien jika dibandingkan jenis CSS untuk website lainnya. Karena dalam satu atribut memiliki style tersendiri, jadi inline cocok untuk website yang tidak membutuhkan banyak baris coding.
Kelebihan Inline CSS
- Memudahkan dalam perbaikan atribut HTML
- Membantu saat pengujian dan melihat perubahan pada satu elemen saja.
- Load website menjadi lebih cepat dan HTTP request menjadi lebih kecil.
Kekurangan Inline CSS
- Kurang efisien dalam penggunaan karena hanya bisa diterapkan pada satu atribut saja.
- Kurang cocok untuk website dengan baris coding yang banyak
Contoh Inline CSS
Untuk lebih jelasnya berikut contoh penerapan Inline CSS:
<h1 style="color:orange; font-family: arial;">Qwords.com</h1>
Kesimpulan
Demikian pembahasan mengenai perbedaan internal, external dan inline CSS. SIlahkan Anda memilih jenis CSS yang mana untuk keperluan membuat website. Jika masih ada pertanyaan tentang CSS Anda bisa belajar website coding online yang sudah tersedia banyak di internet saat ini.
Untuk keperluan hosting website, Kami memiliki rekomendasi hosting murah dari Qwords. Dengan harga mulai dari 14.500/bulan Anda sudah bisa mendapatkan hosting untuk website pertama Anda. Tunggu apalagi onlinekan website mu sekarang juga dengan Qwords.
Terima kasih
