CSS ( CASCANDING STYLE SHEET ) SHORTHAND

Assalamuakaikum wr.wb

Selamat pagi sahabat blogger alhamadulilah masih di sambut sama pagi yang cerah ya, mudah-mudahan kita di beri kemudahan dalam melakukan apapun hari ini , Amin !!!

Kali ini Belajar di Perantauan akan membahas tentang singkatan dari css ( CSS SHORTHAND ), pada pembahasan sebelumnya kita, membahas tentang fungi dan kegunaan MARGIN dan PADDING, bisa kita simpulkan bahwa setiap property dapat memiliki lebih dari sati jenis, misalnya margin memiliki 4 jenis, margin-top, margin-right, margin left, margin-buttom.

margin-top : 20px;

margin-right : 30px;

margin-left : 40px;

margin-buttom : 50px;

Dari pada menuliskan seluruh property tersebut, kita bisa menggunakan CSS-Shorthan yaitu menggabungkan seluruh VALUES (top,right,buttom,left) ke dalam satu property.

Sebagai contoh, kita akan mnggunakan CSS-Shorthand untuk property margin menjadi seperti berikut :

margin : 20px 30px 40px 50px;

Masing-masing dari nilai tersebut adalah :

margin : top right buttom left

Kita juga bisa bermain-main dengan property margin ini, perhatikan dengan seksama contoh berikut :

�         Ketika kita memberikan nilai pada property margin, ini artinya kita memberikan nilai tersebut pada seluruh sisi.

Margin : 20px;

Dengan penulisan seperti ini, maka dari margin-top,right,buttom,left adalah 20px;

�       Ketika kita memberikan dua nilai pada property margin, berarti nilai selanjutnya mengikuti nilai sebelumnya. Contoh :

Margin : 20px 30px;

Pada contoh di atas berarti kita memberikan nilai margin-top dan right bukan ?, nah nilai dari mergin-buttom akan di samakan dengan nilai margin-top dan margin left sama dengan margin-right.

�         Dan ketika kita menuliskan ketiga nilai ini, maka niali yang tidak di isi akan mengikuti nilai yang di isi, sama halnya ketika kita memberi 2 nilai.

Margin : 20px 30px 40px;

Pada contoh diatas, kita memberikan nilai untuk top,right dan buttom. Sedangkan untuk left  akan disamankan dengan right. Penggunaan seperti ini juga berlaku pada padding, dan property-property sejenis lainya.

Na bagaimana teman-teman blogger, mudah-mudahan mengerti ya, semoga bermamfaat, silhkan di share. 

Share this post