Cara menggunakan css external

CSS adalah sebuah bahasa pemrograman yang wajib kamu ketahui ketika belajar membuat website. CSS sendiri mempunyai tiga metode penulisan kode yang berbeda, yaitu Inline CSS, Internal CSS, dan External CSS. 

Tanpa CSS,  tampilan website tidak akan menarik. Kamu harus melakukan usaha lebih untuk melakukan perubahan elemen tampilan website. 

Nah, setiap metode kepenulisan kode CSS memiliki kelebihan dan kekurangannya masing-masing. Begitu juga manfaatnya berbeda-beda pula. 

Pada artikel kali ini, IDwebhost akan berbagi dengan kamu semua, Sahabat IDwebhost tentang perbedaan penulisan kode CSS. Terutama kelebihan, kekurangan, dan manfaat dari masing-masing metode. Begitu juga contoh penempatan setiap kode CSS. 

Jadi, simak artikel ini sampai selesai, ya! 

Apa Itu CSS? 

Sebelum mulai membahas tentang perbedaan inline CSS, internal CSS, dan external CSS, kamu harus tahu dulu apa itu CSS. CSS adalah singkatan dari cascading style sheets. Yaitu sebuah bahasa yang digunakan untuk menentukan tampilan format halaman website. 

Dengan CSS, kamu bisa mengatur banyak hal terkait tampilan website. Mulai dari mengatur jenis font, warna tulisan, dan background halaman. 

CSS digunakan bersama dengan bahasa markup lain, seperti HTML dan XML untuk membangun sebuah website yang bagus serta menarik. 

Bukan hanya itu, CSS juga berguna untuk mengatasi limitasi HTML dalam mengatur tampilan halaman website. 

Ada beberapa contoh keterbatasan HTML. Misalnya, jika hanya menggunakan HTML saat membangun sebuah website dengan beberapa halaman, kamu harus menuliskan tag untuk sebuah elemen HTML di semua halaman web tersebut. 

Dengan CSS, kamu cukup sekali menulis kode untuk sebuah elemen HTML, yang dapat diterapkan di semua halaman. Jika nanti akan melakukan pengubahan, kamu cukup melakukannya pada kode yang sudah kamu tulis tadi. Sangat praktis untuk digunakan. 

Apa Fungsi CSS? 

Kita tahu, secara umum, CSS memiliki fungsi untuk mengatur tampilan halaman website berbasis HTML. Namun demikian, CSS masih memiliki fungsi lainnya lho. 

Apa saja? 

Berikut fungsi CSS yang harus kamu tahu: 

1. Mempercepat loading halaman website 

Fungsi pertama CSS adalah meningkatkan kecepatan halaman website. Karena kamu bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, sehingga meminimalkan jumlah kode. 

Dengan demikian, beban pada saat proses loading akan jadi lebih kecil. 

2. Memudahkan pengelolaan kode

Dengan CSS, kamu tak perlu merubah kode yang ada di setiap halaman jika ingin mengganti tampilan website. 

Cukup dengan mengedit kode CSS, sebuah perubahan bisa diterapkan di semua halaman website. 

Untuk mengatahui cara mengelola kode, kamu bisa mulai dengan belajar bahasa pemrograman, lho! 

3. Memiliki tampilan yang variatif 

HTML memang dapat digunakan untuk mengatur tampilan website. Namun terbatas. Sedangkan CSS menawarkan lebih banyak pilihan tampilan. Sehingga kamu bebas untuk membuat tampilan interface website. 

Contohnya, kamu bisa menggunakan CSS untuk membuat tombol Call to Action. Tombol Call to Action biasa ditemui di halaman landing page. 

4. Tampilan website responsif di semua perangkat

Tampilan website yang responsif di semua perangkat adalah hal yang bagus. Dan CSS memungkinkan hal ini terjadi. 

CSS mempunyai banyak properti untuk mengatur tampilan konten sesuai dengan kebutuhan layar. Penggunaan max-width misalnya. Properti ini dapat mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan tampilan website. 

Jenis-Jenis CSS yang harus kamu tahu: 

CSS dibagi menjadi tiga kategori, berdasaran penempatan kodenya. Yaitu Inline CSS, Internal CSS, dan External CSS. 

Kita langsung mulai coding ya. Pertama saya buat file baru terlebih dahulu dengan tipe text file. Lalu saya ubah namanya menjadi inline.html. Lalu file ini kita buka menggunakan Atom dan Chrome.

Nah, agar cepat, kita langsung gunakan HTML boilerplate. Lalu kita beri judul Latihan CSS.

Kita tambahkan sedikit konten terlebih dahulu ya. Misalkan saya buat daftar Buah yang isinya apel, jeruk, lemon. Lalu saya tambahkan lagi daftar Bintang Peliharaan yang isinya Anjing, Kucing, Ikan.

Sekarang kita mulai menambahkan kode css ya. Misalkan kita ingin mengubah warna dari tulisan Apel menjadi merah. Pertama kita menggunakan cara inline terlebih dahulu. Kita menuju ke tag li yang isinya Apel, lalu kita tambahkan attribute Style dan kita isikan dengan color:red;.

Kita refresh Chrome. Dan hasilnya tulisan Apel sudah berhasil berubah menjadi warna merah.

Inline adalah cara yang paling mudah dan paling cepat untuk menuliskan CSS. Biasanya designer web menggunakan cara ini untuk menguji apakah penggunaan style ini bisa cocok dengan tampilan web yang sedang dikembangkan. Setelah cocok dengan style tersebut, designer disarankan untuk memindahkan kode ini menjadi CSS external, karena inline memiliki banyak kekurangan.

Kekurangan terbesarnya adalah menyebabkan proyek menjadi tidak konsisten. Kita bisa lihat pada Daftar Buah, bahwa yang berwarna merah pada tag list item hanya Apel saja ya, sedangkan yang lainnya tetap berwarna hitam. Untuk mengubah seluruh Daftar Buah menjadi merah, kita harus meng-copy attribute style ke seluruh tag list item pada Daftar Buah. Setelah kita melakukan hal tersebut, maka seluruh nama buah berubah menjadi berwarna merah.

Namun proyek tetap tidak konsisten ya, karena tag List Item pada Daftar Binatang Peliharaan tetap berwarna hitam. Dan apabila kita ingin mengubahnya menjadi merah kita harus copy lagi ke seluruh tag List Item pada Daftar Binatang Peliharaan. Bayangkan apabila proyek kita terdiri dari banyak file, dan masing-masing dari file memiliki beberapa list item. Jadinya kita harus copy attribute style ini ke banyak tempat.

Kemudian misalkan kita hendak mengubah warna tersebut menjadi coklat. Kita coba ubah attribute style pada Apel, kita ubah red menjadi brown. Kita refresh browser dan melihat warna Apel telah berubah menjadi coklat. Namun warna Jeruk dan Lemon tetap merah ya. Untuk mengubahnya, kita harus mengulangi proses ini di Jeruk dan Lemon juga.

Jadi kita bisa melihat disini bahwa cara inline ini paling mudah untuk digunakan pada awalnya saja. Namun nantinya apabila coding kita sudah banyak, akan menyebabkan kita menjadi repot untuk mengurus coding kita. Oleh karena itu kita lebih disarankan untuk menggunakan cara external untuk menuliskan kode css.

Selanjutnya kita akan menuliskan kode css dengan cara kedua, yaitu internal. Pertama kita save as dahulu kode kita dengan nama internal.html. Kemudian kita hapus semua attribute style pada tag li.

Untuk menuliskan kode css secara internal, kita menggunakan tag style. Dan tag ini biasanya diletakkan di dalam tag head. Jadi kita ubah kursor kita menjadi dibawah tag title. Lalu kita tambahkan tag baru Style. Attribute yang biasa digunakan adalah type yang diisi dengan text/css.

Semua yang berada di dalam tag style ini adalah bahasa css, oleh karena itu sintaksnya akan berbeda dari kode HTML. Kita akan membahas lebih lanjut mengenai sintaks css pada video berikutnya. Untuk sementara ikuti cara menulis kode css yang akan saya diktekan.

Tujuan penulisan kode kita masih sama dengan yang sebelumnya ya, yaitu kita hendak mengubah warna Apel menjadi merah. Apel berada di dalam tag li. Oleh karena itu pertama kita tuliskan dahulu li. Kemudian diikuti dengan kurung kurawal. Dan kemudian diikuti dengan properti yang hendak kita ubah. Disini kita isikan dengan color:red;.

Kita lihat hasilnya pada browser ya. Pertama kita ubah dahulu nama file pada URL-nya menjadi internal.html. Dan kemudian bisa kita lihat disini bahwa semua list berubah menjadi warna merah. Hal ini disebabkan karena kita menargetkan semua elemen li untuk mengubah warnanya menjadi merah. Jadinya seluruh list di dalam halaman ini akan konsisten menggunakan warna merah.

Dan enaknya disini, apabila kita berubah pikiran dan hendak mengganti warna merah menjadi warna lain, kita tinggal mengubah di satu tempat saja, yaitu di dalam tag style. Misalkan kita mau menggantinya menjadi warna biru, maka kita tinggal ubah kata red menjadi blue. Dan kita refresh di browser, semua list berubah menjadi warna biru.

Kekurangan dari cara internal ini adalah style yang kita tuliskan hanya berlaku di file html yang sama. Jadi apabila kita sedang mengerjakan satu proyek website yang terdiri dari banyak file html, maka kita harus mengcopy seluruh kode css kita ke setiap file html dalam proyek tersebut. Dan misalnya kita hendak mengembalikan warna biru tadi menjadi warna merah, maka kita harus mengubah kode css di seluruh file html. Tentunya cara ini akan merepotkan kita pada saat kita hendak menuliskan kode untuk proyek besar.

Oleh karena itu, cara menulis kode css yang paling disarankan adalah cara ketiga, yaitu dengan menggunakan external file. Bagaimana caranya? Mari kita praktekan.

Pertama kita save as lagi kode kita menjadi external.html. Kemudian kita membuat file baru dan kita simpan misalkan dengan nama coba.css. Kita bisa menggunakan nama file apa saja ya, asalkan berakhiran dengan .css. Kita pindahkan semua kode css yang berada di dalam tag Style ke file coba.css. Setelah itu kita hapus tag Style.

Selanjutnya kita harus menghubungkan halaman HTML kita dengan file coba.css. Caranya adalah dengan menggunakan tag Link. Attribute yang biasa digunakan adalah rel, yang kita isikan dengan stylesheet. Dan kemudian attribute href, yang cara isinya sama dengan cara mengisi attribute href pada tag anchor yang telah kita pelajari pada tutorial sebelumnya. Href kita isikan dengan alamat dari file css, dalam contoh ini adalah coba.css.

Kita coba hasilnya pada browser. Pertama kita ubah dahulu URL-nya menjadi external.html. Dan bisa kita lihat hasilnya tetap sama dengan file internal.html kita yang terakhir.

Misalkan kita mau mengubah warna tag li menjadi hijau. Maka kita bisa melakukannya dengan cara membuka file coba.css. Lalu mengganti kata blue menjadi green. Kita simpan dan lihat hasilnya di browser. Sekarang semua list sudah menggunakan warna hijau.

Cara external ini adalah cara yang paling disarankan untuk menuliskan kode css. Memang awalnya sedikit repot karena kita harus membuka 2 file yang berbeda. Namun kedepannya hal ini akan sangat membantu kita, terutama pada saat membangun website besar. Kita hanya perlu menuliskan kode css satu kali saja, dan kode yang sama akan digunakan di seluruh halaman yang ada. Cara ini juga mempermudah kita dalam melakukan maintenance terhadap kode kita.

Dan satu hal lagi yang paling ditekankan dalam HTML 5 adalah, kita disarankan agar menggunakan file HTML hanya untuk strukturnya saja. Seperti yang kita lihat dalam kode external.html yang kita barusan kita tulis. Semua kode yang berhubungan dengan style dipindahkan ke file coba.css.

Pada bagian apa teknik CSS eksternal digunakan?

Apa kelebihan dari penggunaan eksternal CSS?

Apa bedanya CSS internal dan eksternal?

Berapa metode penggunaan CSS?