Tutorial Belajar CSS: Cara Mengatur Lebar Element HTML (width)

Property pertama yang akan kita bahas terkait CSS Box Model adalah width. Property ini digunakan untuk mengatur lebar dari sebuah element HTML, apakah itu berupa paragraf, gambar, atau tag ‘general’ seperti

.

---

Cara Mengatur Lebar Element HTML dengan CSS

Untuk mengatur lebar element HTML dengan CSS, kita bisa menggunakan propety width. Property ini diisi dengan satuan seperti pixel, persen, em, dll.

Sebagai contoh, untuk membuat lebar sebuah tag

menjadi 400 pixel, saya bisa menulis sebagai berikut:

Dalam contoh ini saya menggunakan inline style CSS. Jika menggunakan internal style CSS, kita tinggal menempatkannya ke dalam tag

Dalam contoh diatas saya membuat 5 tag

dengan lebar yang berbeda-beda. Setiap lebar diatur menggunakan property width.

Selain menggunakan satuan yang tetap seperti pixel, kita juga bisa menggunakan satuan relatif seperti persen. Berikut contohnya:

Dengan memberikan nilai dalam satuan persen, sekarang lebar dari tag

akan menyesuaikan tergantung lebar web browser. Silahkan anda mengubah lebar jendela web browser, maka lebar dari setiap kotak juga akan mengikuti.

Tapi, bagaimana contoh implementasi sebenarnya dari property width ini?

Langsung saja kita lanjut ke contoh berikutnya:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 
   felis, sit amet ullamcorper elit vulputate in.


   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 
   felis, sit amet ullamcorper elit vulputate in.


   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi 
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam 
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat 
   felis, sit amet ullamcorper elit vulputate in.

Kali ini saya membuat 3 buah paragraf yang berisi dummy teks (lorem ipsum). Pada paragraf pertama, saya tidak menggunakan property apa-apa. Terlihat bahwa secara default, sebuah paragraf akan melebar memenuhi parent element, yang pada contoh diatas akan melebar sepanjang lebar web browser.

Dalam paragraf kedua dan ketiga saya mengatur lebarnya dengan property width, sehingga lebar paragraf akan dibatasi.

Berikutnya, kita akan membahas cara mengatur tinggi element menggunakan property height CSS.

---

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Sumber wk.com

blogger

Next Post

Previous Post