CSS Shortcut
CSS (Cascading Style Sheet) merupakan dokumen yang digunakan untuk mendeskripsikan style & layout halaman website secara kode dan numerik. Kalau di awal perkembangan website, penulisan style dan layout digambar dengan aplikasi grafis halaman per halaman, dengan adanya CSS ini grafis setiap halaman digunakan secara lebih optimal dengan menggunakan deskripsi yang dikodekan dalam file dengan ekstensi CSS. Demikian juga style dan layout seperti warna, ukuran kotak tampilan, font, posisi, dan desain visual diatur menggunakan CSS. Akibatnya, proses perawatan halaman per halaman lebih mudah dan cepat dilakukan.
Kalau baru belajar CSS, membuat file CSS nampak sangat sulit dan rumit. Untuk cepat bisa, paling gampang sebenarnya bukan menghapal kodenya, tapi meng-oprek satu file CSS dan bereksperimen dengan mengubah-ubah beberapa parameter di dalamnya. Penulisan kode CSS yang lengkap tentu lebih banyak digunakan ketika baru belajar CSS. Tapi setelah beberapa waktu belajar, akan kita temukan beberapa teknik jalan pintas untuk menggabungkan kode CSS menjadi lebih singkat. Meskipun, tentu tidak sederhana karena kita harus terbiasa dulu dengan kode CSS baku yang lengkap. Berikut ini merupakan beberapa kode jalan pintas CSS yang dapat digunakan untuk lebih memadatkan file CSS yang Anda buat.
Contoh CSS Layout
Color
Warna didefinisikan dengan kode rgb, kode hexadesimal enam digit, atau dengan “nama warna” jika warnanya standar atau baku. Misalnya warna putih dituliskan #FFFFFF atau “White”. Contoh berikut dapat digunakan untuk mempersingkat kode warna halaman HTML yang akan dibuat dengan kode CSS :
#body {color:red;}
h1 {color:#00ff00;}
p {color:rgb(0,0,255);}
Dapat dituliskan kembali menjadi :
#body {
h1 color:#fff;
p color:#fff;
}
Font
Mendefinisikan font dengan CSS sedikit lebih rumit karena terdapat beberapa sifat dasar font atau huruf yang digabungkan seperti warna, tebal tipisnya huruf, tinggi huruf, jenis huruf, dll. Cara lama mendefinisikan font/huruf dalam CSS :
#div {
font-variant:large-caps;
font-weight:bold;
font-size:2em;
line-height:1.8em;
font-family:Helvetica, serif;
}
Cara singkat:
#div {
font: small-caps bold 1em/1.4em 'Georgia' ,serif;
}
Background
Penulisan yang lazim untuk background halaman atau background box yang terletak diantara <div></div> adalah :
background-image: url("nama_file_background.jpg");
background-position: top center;
background-repeat: no-repeat;
Cara ringkasnya :
background: url(nama_file_background.jpg) no-repeat top center;
Padding
Definisi kotak Div
Padding atau jarak antara isi dan batas kotak tampilan sangat penting ketika kita gunakan CSS. Elemen padding antara lain didasarkan pada posisi “isi” terhadap garis tepi <DIV></DIV> yaitu atas, kanan, bawah dan kiri. Perhatikan cara membacanya dimulai dari atas kotak searah jarum jam dengan susunan a,b,c,d. Misalkan kita ingin mempunyai jarak pading 30px, biasanya ditulis :
#div {
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:35px;
}
Cara singkatnya :
#div {
padding:10px 20px 50px 45px;
}
Border
Border atau batas merupakan ciri untuk membuat garias batas kotak Div dengan berbagai gaya garis yang dapat tampil dengan mengatur warnanya, tebal tipisnya, tinggi dan jenis garis tepinya. Penulisan baku :
#div {
border-width: 1px;
border-style: solid;
border-color: #f2f2f2;
}
Cara singkat :
#div {
border: 1px solid #f2f2f2;
}
Margin
Sifat-sifat margin serupa dengan padding. Bedanya, padding diukur ke dalam kotak Div sedangkan Margin relatif terhadap referensi di luar kotak Div. Margin tak lain adalah jarak antara dua obyek Div atau satu obyek kotak Div dengan defaut halaman HTML yaitu tag <body>. Cara baku penulisannya :
#div {
margin-top: 12px;
margin-right: 12px;
margin-bottom: 12px;
margin-left: 12px;
}
Cara singkat:
#div {
margin: auto auto auto auto;
}
Perhatikan dalam penulisan Margin berlaku kaidah searah dengan jarum jam seperti padding.
List
Daftar atau List mempunyai penulisnabaku :
#ul li {
list-style-type:square;
list-style-position:inside;
list-style-image:url(list.png);
}
Cara singkat:
[code]#ul li {
list-style:square inside url(list.png);
}
sumber bacaan :
- http://designerscouch.org/show_article/183/valuable-css-shorthand-techniques.html
