Beberapa Property CSS yang Wajib di Ketahui dan di Pahami

Watsap mamankkk, akhirnya kita bertemu lagi, awal-nya saya bingung mau nulis artikel apaan hehe..

Setelah melalui semedi yang cukup lama, 7 hari 7 malam nggak makan nasi, cuma makan lontong aja haha, akhir nya nemu juga ide buat nulis artikel yang saya beri judul ‘Beberapa Property CSS yang Wajib di Ketahui dan di Pahami’, semoga bermanfaat yeee.

Tentunya ketika kita berbicara CSS berarti kita berbicara mengenai tampilan pada sebuah Website. Bagi teman-teman yang kerjaannya membuat style CSS atau yang sedang ingin belajar CSS ada beberapa property yang wajib teman-teman ketahui dan pahami. Wajib diketahui, karena akan sangat sering digunakan dan membantu kita dalam membuat sebuah tampilan. Memahami di sini maksud nya adalah ketika property itu kita gunakan kita wajib tahu:

1. Apa kegunaan dari property tersebut.
2. Masalah apa yg akan terjadi ketika memakai property tersebut dan bagaimana cara mengatasinya.
3. Property lain yang hanya bisa kita gunakan ketika kita memakai property tersebut.

Apa sih property CSS? nah berikut ini adalah contoh penggunaan property ‘color’:

body {
  color: #333333;
}

“color” pada kode CSS di atas adalah sebuah property, tentunya ada banyak property pada style CSS dan berikut adalah beberapa property CSS yang wajib teman-teman ketahui dan pahami:

1. Position
2. Display
3. float

Property Position

Position memiliki value ‘fixed’, ‘absolute’ dan ‘relative’.

Position fixed jika digunakan akan membuat element yang menggunakan porperty ini menjadi sticky, biasanya sering digunakan untuk membuat sticky header, jadi ketika kita scroll halaman web kita , maka header tersebut akan mengikuti. Masalah yang terjadi ketika kita menggunakan position fixed, maka elemen yang menggunkan property ini akan berada di atas atau menutupi elemen lain. Cara mengatasinya adalah dengan menggunakan position relative pada elemen lain tersebut dan beri property z-index : 2 atau z-index dengan value 2 dan elemen dengan position fixed kita beri property z-index : 1 atau z-index dengan value 1. Maka dengan begitu elemen dengan position relative akan berada di atas elemen dengan position fixed

Position absolute biasa-nya sering kita temui digunakan untuk membuat dropdown menu, elemen yang manggunakan property ini hampir sama dengan position fixed, hanaya beda nya elemen yang menggunkan position absolute tidak menjadi sticky seperti pada elemen yang menggunkan position fixed. Masalah yang terjadi juga sama dengan masalah yang terjadi pada elemen yang menggunakan position fixed. Cara mengatasinya pun sama, yaitu dengan menggunkan position relative, akan tetapi ada trik yang dapat kita lakukan dengan memanfaatkan position relative dan absolute dan sudah saya tulis pada artike sebelumnya, silahkan lihat pada link berikut:

TRIK CSS: ABSOLUTE DI DALAM RELATIVE

Position relative, digunakan untuk mangatasi masalah yang timbul saat menggunkan position fixed dan absolute, seperti yang sudah saya tulis di atas

Property lain yang hanya bisa kita gunakan ketika kita menggunakan position fixed, absolut dan relative yaitu property z-index, top, left, right dan bottom.

Property Display

Display memiliki value ‘inline’, ‘block’, ‘table’ , ‘table-cell’, ‘inline-block’ dan ‘flex’. Yang paling wajib kita ketahui adalah display inline-block, bisanya saya sering gunakan untuk membuat menu atau pagination.

Di sini saya ingin memberikan contoh:

HTML:
<ul>
  <li>1</li>
  <li>2</li>
</ul>

pada HTML di atas tag <li> kita beri style property display inline-block seperti berukut:

CSS:
ul li {
  display: inline-block;
}

Maka tampilan nya akan seperti pagination, nah masalah yang ada pada display inline block ini adalah pada masing-masing <li> memiliki padding, walaupun kita sudah beri style padding: 0; tetap saja ada padding yang membuat tiap-tiap <li> tidak rapat.

Jika pada masing-masing tag <li> kita beri image bukan angka seperti contoh di atas, maka padding atau jarak tersebut akan jelas terlihat.

Cara menghilangkan padding atau jarak tersebut adalah dengan memberi style font-size: 0; pada tag <ul> seperti berikut:

ul {
  font-size: 0;
}

Dengan begitu padding atau jarak tersebut sudah hilang. Akan tetapi jika pada masing-masing tag <li> berisikan text maka ukuran font nya akan ikut style yang ada pada <ul> yaitu 0.

Untuk itu kita harus memberikan style font-size pada tag <li> misal font-size: 14px;

Property lain yang hanya bisa kita gunakan ketika kita memakai property display: inline-block adalah property vertical-align dan tidak hanya inline-block, display inline dan table-cell juga bisa menggunkan property vertical-align.

Property Float

Property float memiliki value ‘left’ dan ‘right’, kegunaan nya sama seperti display inline-block tadi yaitu membuat elemen menjadi sejajar, hanya beda-nya dengan menggunakan float kita bisa memebuat sebuah elemen sejajar dari kiri dengan float: left; dan sejajar dari kanan dengan menggukan float: right;

Jika temam-teman pernah melihat grid system pada bootstrap versi 3, di situ mengguanakan property float: left; untuk membuat grid-nya tersebut.

Saya berikan contoh sebagai berikut:

<div class=”parent”>
  <div class="col-1">1</div>
  <div class="col-2">2</div>
</div>

jika pada class col-1 dan 2 kita beri style float: left; maka elemen col-1 dan 2 akan menjadi sejajar dari kiri.

Masalah yang terjadi keitka kita menggunakan property ini adalah tinggi / height dari class=”parent” akan menghilang atau menjadi 0, padahal seharusnya tinggi dari parent tersebut secara default mengikuti isi dari parent tersebut yaitu col-1 dan 2

Tetapi ketika kita menggunakan float: left; pada col-1 dan 2 seakan-akan col-1 dan 2 tersebut keluar dari parent tersebut.

dan ketika ada elemen lain setelah parent maka elemen baru tersebut akan bertumpukan denga elemen col-1 dan 2, di karenakan height dari parent menghilang.

Cara mengatasi masalah tersebut adalah, pada class parent kita buat style berikut:

.parent:after {
  content: "";
  display: block;
  clear: both;
}

Dengan begitu tinggi dari parent akan kembali mengikuti isi dari parent tersebut yaitu col-1 dan 2.

Nah pada property float ini tidak ada property khusus yang hanya bisa di gunakan ketika kita kita menggunakan property float ini.

Saya rasa sudah cukup, ternyata ada 3 property CSS yang wajib kita ketahui, jika menurut teman-teman masih ada yang kurang atau ada yang terlewat dari artikel ini silahkan tulis di kolom komentar biar kita sama-sama belajar.

Dan jangan lupa klik subscribe like dan share, kita ketemu lagi di artikel beriukut nya . Thankyou arigatou. :D