CSS Height & Width, Box Model, Outline (CLo)

Width & Height

Dalam CSS, kita mengenal yang namanya Width dan Height, kegunaan Width dan Height adalah untuk mengatur lebar dan tinggi sebuah element.

Width dan Height dapat dibuat menjadi auto, atau dapat diukur dengan satuan seperti px,cm, dll atau bahkan dalam bentuk persen(%) dari pembungkusnya.

Contoh sintaksnya:



Ini adalah contoh div yang mempunyai lebar 50% dari layar, tinggi 10% dari layarnya, dan berwarna biru muda.

Hasilnya adalah :




Jika ingin mengganti satuan menjadi px, sintaksnya sama saja, hanya perlu mengganti % menjadi px.

 Properti max-width digunakan untuk mengatur lebar maksimum dari sebuah element. Sama seperti width, max-width dapat ditulis dengan satuan seperti px, cm, dan persen, atau bisa diatur menjadi none yang berarti tidak ada max-width.

Box Model

Dalam CSS, istilah Box Model ini digunakan untuk membicarakan design dan layout, Box Model adalah kotak yang membungkus setiap element HTML, Box Model ini terdiri dari Margin, Border, Padding, Content.

Penjelasannya :

• Content adalah isi dari kotak tersebut, seperti inti dari box model tersebut.
• Padding untuk memberi jarak antara content dengan border, padding ini transparant.
• Border adalah sebuah border yang membatasi padding dengan margin.
• Margin adalah kebalikan dari padding, jika padding untuk memberi jarak di dalam border,maka margin untuk memberi jarak di luar border, margin juga transparant.

Outline

 Kegunaan dari outlne adalah untuk menentukan style, warna, dan lebar sebuah outline. Sebuah outline adalah garis yang digambar di luar border. Properti outline ini berbeda dengan border, outline bukanlah bagian dari dimensi element. Ada beberapa style outline-style, contohnya :

• dotted = titik-titik
• dashed = garis-garis
• solid = biasa
• double = 2 garis
• groove = bergaris di kiri dan atas, efeknya tergantung warna outline
• ridge = bergaris di kanan dan bawah, efeknya tergantung warna outline
• inset = hampir sama seperti groove, hanya lebih tebal
• outset = hampir sama seperti ridge, hanya lebih tebal
• none = tidak ada outline
• hidden = tersembunyi

Untuk lebih jelasnya, perhatikan contoh outline berikut :



Hasilnya :



Dalam codingan di atas, kita dapat melihat ada tertulis outline-color, kegunaan properti tersebut adalah untuk menentukan warna outline, kita dapat mengubah warna tersebut sesuai keinginan.

Pada outline juga mengenal yang namanya width, width ini digunakan untuk mengatur tebal outline tersebut, sintaksnya adalah



Ini berarti tebal garis outline tersebut adalah 5px.

Untuk mempersingkat coding, maka kita bisa menuliskannya menjadi seperti berikut



Hasilnya adalah :



Penulisan ini mempunyai urutan sebagai berikut :

• outline-width
• outline-style
• outline-color

Sampai disini dulu tutorialnya. Semoga bermanfaat bagi kita semua. :)