Properti Tambahan Untuk Menu : Kelas CSS

CSS adalah bahasa program yang digunakan untuk membuat cantik tampilan sebuah halaman website atau aplikasi. Ada banyak komponen dan elemen didalamnya yang dapat memanipulasi tampilan sesuai yang kita inginkan. Jika kamu ingin mempelajari tentang CSS, rekomendasi untuk belajar bisa mengunjung halaman https://www.w3schools.com/css/

Tutorial dihalaman ini berhubungan dengan salah satu properti tambahan untuk Menu yaitu Kelas CSS. Coba perhatikan halaman website ini, terlihat rapi baik dalam layout maupun pewarnaan. Semua ini terjadi karena ada CSS didalamnya.

Coba perhatikan gambar dibawah ini, ini yang terjadi jika halaman website ini tanpa CSS

Tanpa adanya CSS halaman website akan tampil seperti gambar diatas dan tidak menarik sama sekali. Berbeda jika didalamnya ditambahkan CSS yang diatur sedemikian rupa hingga membentuk tampilan yang berbeda. Seperti gambar dibawah ini.

Jika kamu memiliki pengetahuan tentang CSS, kamu bisa berkreasi dengan pengetahuan CSS yang kamu pahami dan menerapkan pada file CSS. Buat kelas-kelas CSS baru dan berikan property sesuai yang kamu mau dan nanti kelas CSS tersebut akan kamu terapkan pada Properti Menu bernama Kelas CSS.

Contoh kelas css seperti berikut, misalnya sebuah kelas css bernama redmenu ditulis sebagai .redmenu (titik didepan dibaca sebagai kelas)

.redmenu {
background: red;
color: white;
}

Kode diatas jika diterapkana akan membuat sebuah kotak berwarna merah dan text didalamnya berwarna putih

Kamu bisa meletakkan kode CSS ini pada sebuah file CSS didalam tema, misalnya dimasukkan kedalam file bernama style.css yang ada ditema yang dipakai saat ini. Atau bisa juga melalui fitur CCS Tambahan yang ada di halaman Tampilan > Sesuaikan > CSS Tambahan.

Selanjutnya silahkan membuka halaman pengelolaan Menu disini

Tampilan > Menu

  • Buka Opsi Layar pada sisi kanan atas, klik untuk membuka kotak diatasnya
  • Centang pada Kelas CSS seperti pada gambar berikut ini
  • Tutup kembali Opsi Layar

Setelah ini kamu sudah bisa mengedit Menu dan menambahkan Kelas CSS yang kamu buat, tambahkan nama kelasnya (tidak pake titik didepan)

  • Klik ikon panah kecil untuk membuka Menu yang ingin diedit
  • Ketikkan Kelas CSS pada kolom yang berlabel Kelas-Kelas CSS (opsional)
  • Klik Simpan Menu untuk menyimpan hasil perubahan

Kamu sudah bisa melihat perubahan dengan mengunjung halaman website dan cek pada salah satu menu yang telah kamu tambahkan Kelas CSS tadi. Contohnya pada tutorial ini background Menu dengan background biru dan text putih, Menu yang ditambah Kelas CSS warnanya akan berbeda sendiri yaitu background merah dan text putih.

CATATAN : Minimal harus paham tentang bahasa CSS jika ingin berkreasi denganĀ  Kelas CSS, kamu bisa mempelajari tentang program CSS melalui website W3Schools

 

 

 

Apa artikel diatas membantu kamu?

Berikan bintang dong

Nilai rata-rata / 5. Jumlah Vote:

__Terbit pada
Mei 26, 2019
__Kategori
Menu

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *