Display CSS

Salah satu hal yang paling susah dalam membuat sebuah webpage tanpa menggunakan tabel adalah penggunaan line break secara otomatis.

Misalkan saja kita memiliki sebuah paragraph dan kita ingin mengatur bagaimana paragraph tersebut ditampilkan. Apakah text paragraph tersebut ditampilkan dalam satu baris panjang atau dipotong-potong secara otomatis berdasarkan lebar webpage?

Dengan CSS display maka kita bisa memodifikasi tampilan line break di beberapa element seperti paragraph, header, dan menu.

block and inline

Code “display:block” bisa kita gunakan untuk memberi line break secara otomatis pada sebuah element. Pada contoh dibawah kita memberikan code “display:block” pada element link yang kita gunakan pada sebuah menu sehingga setiap ada link maka setelahnya ada line break. Dengan cara ini maka menu yang kita gunakan akan ditampilkan berderet kebawah dan bukannya berderet ke samping.

Code “display:inline” bisa kita gunakan untuk menghilangkan line break yang ada pada sebuah element. Pada contoh dibawah kita memberikan code “display:inline” pada element paragraph sehingga semua text dan paragraph yang ada akan ditampilkan dalam satu baris panjang kesamping.

Code CSS display dan inline:

a { display: block; }
p { display: inline; }

Code HTML display dan inline:

<a href="http://learn.wordpress.com/" target="_blank">learn.wordpress.com - Tutorial WordPress.com</a>
<a href="http://en.forums.wordpress.com/" target="_blank">en.forums.wordpress.com - Forum WordPress.com Internasional</a>
<a href="http://id.forums.wordpress.com/" target="_blank">id.forums.wordpress.com - Forum WordPress.com indonesia</a>
<br />
<p>Element paragraph ini</p>
<p>sudah diberi</p>
<p>code</p>
<p>display inline.</p>

Hasil code CSS display dan inline:

learn.wordpress.com – Tutorial WordPress.com
en.forums.wordpress.com – Forum WordPress.com Internasional
id.forums.wordpress.com – Forum WordPress.com indonesia
Element paragraph ini         sudah diberi         code        display inline.

display none

Kalau kamu ingin menyembunyikan sebuah element maka kamu bisa bisa menggunakan code “display:none”.

Code CSS hidden:

p.show { display: block }
p.hide { display: none; }

Code HTML hidden:

<p class="show">Paragraph ini ditampilkan secara normal karena ada code display dengan value block.</p>

<p class="hide">Paragraph ini tidak ditampilkan karena ada code "display:none".</p>

Hasil code CSS hidden:

Paragraph ini ditampilkan secara normal karena ada code display dengan value block.

CSS display merupakan salah satu element penting dalam mendesain sebuah website. Kalau kamu sudah mengusai display CSS maka modifikasi website HTML yang kamu punya akan menjadi lebih menarik lagi.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>