Cara Menggunakan Beberapa Nama Class Pada Satu Tag HTML

05/12/2014    Faizal Rafik    5670     Website

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya memberikan beberapa nama pada attribute Class didalam Tag HTML. Dengan menggunakan beberapa nama Class di dalam Tag HTML memungkinkan kita untuk memberikan banyak style pada elemen tersebut, dan kalian tidak perlu membatasi elemen tersebut dengan satu nama Class atau kalian mengganti nama Class tersebut dengan nama lainnya.

Nah cara untuk memberikan beberapa nama Class pada satu elemen didalam Tag HTML, caranya kalian bisa menambahkan nama Class tersebut dengan memisahkannya menggunakan Space antara nama pertama, kedua, atau ketiga. Berikut adalah contoh penulisan beberapa nama Class pada satu elemen.

Pada contoh diatas bisa kalian lihat terdapat 3 nama Class yang berbeda-beda nama1 untuk nama Class yang pertama, nama2 untuk nama Class yang kedua, dan nama3 untuk nama Class yang ketiga.

Nah disini saya akan memberikan contoh kasus misalkan disini saya memiliki satu tag div dengan nama id wrapper dan didalam id wrapper tersebut terdapat 3 tag div lagi dengan nama Class yang sama semuanya.

Kemudian didalam tag div dengan nama class kolom tersebut kita akan coba berikan masing-masing satu tag paragraf atau tag <p>, seperti contoh dibawah ini, dan untuk isi paragraf nya bebas kalian mau isi apa.

Disini kita akan membuat kolom-kolom tersebut sejajar secara horizontal kekanan dan memiliki warna Background yang berbeda-beda seperti gambar dibawah ini.

Pada contoh diatas saya memberikan nama Class baru bgcolorred, bgcolorblue, dan bgcolororange pada ketiga kolom tersebut untuk memberikan warna background-color yang berbeda-beda pada setiap kolom.

Nama class bgcolorred, bgcolorblue, dan bgcolororange diatas, selain untuk memberikan warna background-color pada elemen tersebut, kalian juga bisa menambahkan property CSS lainnya.

Nah kerugian dari penggunaan banyak nama Class didalam satu elemen, terkadang style yang kita berikan pada nama Class yang baru tersebut belum tentu bisa berjalan dengan sempurna, tetapi teman-teman tidak perlu khawatir karena teman-teman tinggal menambahkan !important pada property yang tidak jalan tersebut. !important sendiri berfungsi untuk mengaktifkan atau menjalankan fungsi property pertama pada CSS tersebut, karena pada CSS jika terdapat 2 property dengan nama yang sama maka CSS akan menjalankan property yg kedua, sedangkan property pertama tersebut tidak dijalankan atau kalah dengan property yang kedua, nah jika teman-teman ingin property pertama tersebut dijalankan juga maka teman-teman perlu menambahkan !importan pada property pertama tersebut.

Itulah cara menambahakan beberapa nama Class pada satu tag HTML, Sekian dulu tutorial dari saya, semoga tutorial ini bermanfaat untuk teman-teman. Terima Kasih.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More