Cara menggunakan apa itu css embedded?

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.

Apa itu CSS embedded?

Bagaimana cara kerja CSS?

Jelaskan apa itu CSS dan kegunaannya?

Apa yang dimaksud dengan CSS dan berikan contohnya?