Halo kawan semua, kembali lagi dengan saya di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan belajar tentang Perbedaan Fungsi inline dan block Pada CSS, khusus untuk teman – teman yang baru belajar membuat website sendiri. Perlu teman – teman ketahui bahwa fungsi ini sering juga di gunakan untuk mengatur sebuah tag html, dan di dalam tag html juga terdapat tag yang bersifat inline (sejajar) atau block (pindah baris baru) atau mungkin teman – teman sudah membuat bentuk pada css dan hasilnya adalah block tetapi ingin mensejajarkan antara yang lainnya. Cukup teman – teman berikan pada css nya display:inline maka bentuk yang teman – teman buat akan tampil sejajar (secara inline).
Dan pada artikel tentang Perbedaan Fungsi inline dan block Pada CSS ini, kita akan membuat sebuah studi case yang simple saja. Yaitu kita akan membuat sebuah tag html yang bernilai inline dan block, masing – masing tag tersebut akan kita berikan pada display sesuai kebalikan dari default html tersebut dan kita juga akan membuat sebuah bentuk kemudian kita akan merubahnya dengan menggunakan display. Oke langsung saja teman – teman buat file baru dan save terlebih dahulu dengan extensi .html (index.html) kemudian berikan text pada masing – masing tag html nya
|
1 2 3 4 5 6 7 |
<h1>TEXT H1</h1> <p>TEXT P</p> <div>TEXT DIV</div> <br><br> <span>TEXT SPAN</span> <label>TEXT LABEL</label> <strong>TEXT STRONG</strong> |
Jika sudah masukkan fungsi css nya untuk merubah display nya
|
1 2 3 4 5 6 |
<style> h1,p,div {color:white;background: orange; display: inline;} span,label,strong{background: lightblue; display: block; color: green} .kotak{color:red; background: lightgray; width: 300px; height: 100px; float: left; margin-right: 10px} .kotak p{color:red; display: inline; margin-right: 10px} </style> |
Jika sudah save dengan nama index.html, lalu jalankan pada browsernya. Maka hasilnya seperti gambar di bawah ini
- Tag html bernilai block berikan display inline
- Tag html bernilai inline berikan display block
Maka teman – teman akan melihat hasil outputnya dari fungsi display pada css ini, akan merubah dari nilai default html nya. Dengan begitu menggunakan css memudahkan kita membuat output sesuai keinginan, untuk teman – teman yang baru terjun di dunia website saya sarankan untuk sering mencoba dengan beberapa studi case. Karena dengan banyaknya latihan akan membuat kita terbiasa akan fungsi – fungsi pada css yang mempunyai banyak kegunaannya. Untuk itu jika teman – teman masih bingung dan ada yang di tanyakan seputar artikel kali ini, bisa pos komentar di bawah ini.
Sekian pada artikel kali ini tentang Perbedaan Fungsi inline dan block Pada CSS kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, Terimakasih dan sampai jumpa.