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 , 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 , berikut caranya.

Tag 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:

  



  
Qwords.com
  
Contoh External CSS

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:

Qwords.com

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