Banyak sekali fungsi – fungsi di dalam css untuk membuat layout, apalagi orang yang baru belajar membuat layout dengan html css tentunya membutuhkan waktu untuk pelan – pelan mempelajari dan mempraktekkannya. Pada kesempatan kali ini saya akan memberikan tips dan trik bagaimana Cara Menggunakan Fungsi order pada CSS, di latihan kali ini saya akan mencoba praktekkan dari salah satu fungsi css yaitu fungsi “order” dimana fungsi order ini untuk memanggil value yang kita mau selama tag html nya sama. Nah, disini saya mempunyai 4 buah kotak yang berbeda – beda warna kemudian nanti saya akan acak kotak menggunakan fungsi order. Pertama – tama siapkan terlebih dahulu text editornya kemudian copy script html nya di bawah ini

Lalu save dengan index.html, langkah berikutnya tambahkan script css nya di bawah ini untuk mengatur kotak dan warna nya

Jika sudah, save dan jalankan pada browsernya. Maka hasilnya sementara seperti gambar di bawah ini

Cara Menggunakan Fungsi order pada CSS

Bisa kalian lihat pada gambar di atas ini, kotak saya beri warna yang berbeda – beda dan saya berikan nomor urut agar kita sama – sama bisa tahu nanti untuk pengacakan warnanya. Baik, sekarang kita implementasikan Cara Menggunakan Fungsi order pada CSS. Teman – teman tambahkan fungsi order nya di dalam css seperti gambar di bawah ini

Cara Menggunakan Fungsi order pada CSS

Kemudian save dan refresh pada browsernya, maka hasilnya akan tetap sama karena di fungsi order saya tempatkan nomornya sesuai urutannya

Cara Menggunakan Fungsi order pada CSS

Selanjutnya kita akan coba acak nomornya menjadi

Cara Menggunakan Fungsi order pada CSS

Maka hasilnya seperti di bawah ini

Cara Menggunakan Fungsi order pada CSS

Bisa teman – teman lihat hasilnya di atas ini, warna dan angkanya juga ikut di acak oleh order. Kemudian jika saya acak tengah nya

Cara Menggunakan Fungsi order pada CSS

Maka hasilnya seperti gambar di bawah ini

Cara Menggunakan Fungsi order pada CSS

Gambar kotak juga akan di pindahkan, kesimpulannya adalah fungsi order ini bisa merubah content dengan tag yang sama dan content tersebut di panggil dan ditempatkan pada class atau id yang berbeda tanpa harus merubah id atau class nya hanya kita tentuin saja dengan angka.

Bagaimana, mudah sekali bukan,,?

Oke, cukup sekian pada artikel kali ini tentang Cara Menggunakan Fungsi order pada CSS kita berjumpa kembali di artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.