Salah satu keunggulan penggunaan metode CSS(cascading Style Sheet) adalah size dari file yang dihasilkan lebih kecil, dan otomatis akan mengurangi waktu download halaman kita di internet. selain itu juga salah satu keunggulan (keunggulan utama menurut saya) adalah dengan metode CSS kita bisa memisahkan antara HTML dengan visual style-nya dimana akan memudahkan kita melakukan switching dan atau upgrade desain visual dari website kita. So tidak perlu lagi mengganti line by line di halaman HTML cukup mengganti-nya di halaman CSS kita, dan akan langsung mengubah tampilan HTML sesuai perubahan yang kita buat di halaman CSS.
Tapi dari metode css ini sendiri kita bisa melakukan optimize sehingga manfaat yang kita dapat dari penggunaan metode CSS ini lebih besar baik itu dari sisi filesize maupun kemudahan lain dari metode CSS. Tehnik Optimisasi yang saya bahas disini adalah penggunaan CSS Shorthand Properties, apa itu?
CSS Shorthand Properties adalah Penyederhanaan bentuk penulisan blok deklarasi CSS
CSS Shorthand Properties Font
Dengan metode CSS biasa kita menuliskan property untuk font sbb:
line-height: 1.5em;
font-weight: bold;
font-style: underline;
font-family: arial
Dengan metode peyederhanaan kita bis amenuliskan 5 baris diatas menjadi satu baris saja
CSS Shorthand Properties Font mempunyai element minimal Font-Size dan Font-Family element-element yang lain seperti: font-weight, font-style hanya di apply jika disebutkan, jika tidak akan dikembalikan ke nilai default.
CSS Shorthand Properties Border
Metode CSS biasa:
border-color: #000;
border-style: dotted
Dengan metode CSS Shorthand Properties Border bentuk CSS diatas menjadi
Jika disebutkan spesifik border misal:
border-left-color: #000;
border-left-style: dotted
CSS Shorthand Properties Border :
Selain cara diatas kita juga bisa memanfaatkan CSS Shorthand Properties Border untuk menyederhanakan bentuk CSS border yang berbeda untuk setiap sisi, dengan aturan penulisan ber-urut top, right, bottom, left. perhatikan code CSS dibawah kedua blok CSS tersebut menghasilkan visual yang sama.
border-top-color:#000099;
border-top-style:dotted;
border-top-width:2px;
border-right-color:#006600;
border-right-style:solid;
border-right-width:4px;
border-bottom-color:#000000;
border-bottom-style:dashed;
border-bottom-width:1px;
border-left-color:#CC0000;
border-left-style:double;
border-left-width:3px;
}
.dua{
border-color:#000099 #006600 #000000 #CC0000;
border-style:dotted solid dashed double;
border-width:2px 4px 1px 3px;
}
CSS Shorthand Properties Margin & Padding
Penulisan style margin dan padding sangat fleksible jika menggunakan CSS Shorthand Properties Margin & Padding tergantung jumlah nilai element yang dimasukkan didalam deklarasi CSS.
4 Nilai Element
Aturan urutan yang berlaku jika kita memasukkan ke-4 element sisi margin & padding adalah Top, Right, Bottom, Left. Contoh :
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px
}
.margin_2{
margin:1px 2px 3px 4px;
}
Ke-2 blok deklarasi CSS margin diatas akan menghasilkan visual effect yang sama terhadap element yang mengunakan class bersangkutan.
3 Nilai Element
Aturan : top, right and left, bottom. Contoh :
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
.margin_2{
margin: 1px 2px 3px;
}
2 Nilai Element
Aturan : top and bottom, right and left. contoh:
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-left: 2px;
}
.margin_2{
margin: 1px 2px;
}
1 Nilai Element
Aturan : Semua sisi menggunakan nilai yang sama. contoh:
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
}
.margin_2{
margin: 1px;
}
Untuk Padding berlaku aturan CSS Shorthand yang sama dengan margin
CSS Shorthand Properties Background
background-color: #000;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: top center
}
.background_2{
background:#000 url(sample.gif) no-repeat top center
}
Jika nilai background-repeat dan atau background-position tidak disebutkan maka nilai default akan digunakan yaitu repeat dan atau top left.
CSS Shorthand Properties List
list-style-type:circle;
list-style-position:inside;
list-style-image: url(sample.gif)
}
li.dua{
list-style: circle inside url(sample.gif)
}
Jika salah satu element list stle tidak disebutkan maka akan diberikan nilai default yaitu disc untuk list-style-type, outside untuk list-style-position dan none untuk list-style-image.
wah keren banget tutorial CSS-nya…
desain web nya juga keren euy…
CSS, buat kode2 diatas kayaknya memakan banyak waktu ya?
saya liat banyak tag yang digunakan…
ngeri euy…. mantaps…
salam kenal…
salam kenal juga, he he senang ada yang menganggap ini bermanfaat jadi termotivasi nulis lebih banyak. penulisan CSS-nya ngga begitu lama koq yang penting konsep diawal jelas langkah selanjutnya tinggal menuliskan code CSS-nya saja geto … thanks for dropping by.
Bagus banget..
aku lagi belajar nih, kalo mau bikin background halaman site kita ada images-nya, CSS codenya bagaimana yah?
ST
background:warna url(relative_path_ke_gambar.gif) no-repeat top center;
saya “pengikut” baru blog ini, kalau boleh tanya, gmn cara nulis CSS buat font bar lebih singkat. Karena setahu saya code untuk font tidak bisa diletakkan terbalik-balik.
css{
font:font-style font-variant font-weight font-size line-height font-family;
}
css{
font:normal normal bold 1em/1.2em georgia,”times new roman”,serif;
}
saya pendatang baru, tolong beri penjelasan bagaimana cara mendapatkan script2nya? atau ada cara lain untuk mendapatkan script itu