Mengenal CSS Shorthand Property 1

Shorthand Property dalam CSS memungkinkan kita dapat mempersingkat penulisan CSS. Beberapa properti yang terdapat dalam satu kategori dapat ditulis dalam satu properti. Hal ini tentu saja dapat mempercepat penulisan CSS dan meminimalkan filesize. Sebagai contoh penerapan CSS Shorthand Property, dapat kita lihat dibawah:

p {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11pt;
font-style: normal;
}
dapat kita singkat menjadi:
p {
font: normal 11pt Arial, Helvetica, Sans-Serif;
}

CSS Shorthand Property ini dapat kita terapkan pada background, font, margin dan padding, border, dan list.
Background
Pada background, CSS Shorthand Property memiliki sintaks sebagai berikut:
background: background-color | background-image | background-repeat | background-attachment | background-position

contoh:
.elin {
background: #EFEFEF url('images/background.jpg') repeat-x fixed top;
}
Font
Sintaks:
font: font-style | font-variant | font-weight | font-size | line-height | font-family

contoh:
p {
font: bold 11px Arial, Helvetica, Sans-Serif;
}
margin dan padding
Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Contoh:
.left {
margin: 11px 12px 30px 20px;
padding: 11px 12px 30px 20px;
}

Supaya memudahkan mengingat, saya biasa menganalogikannya dengan putaran jarum jam yang selalu dimulai dari jam 12 (top). Untuk margin dan padding, ia memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi:

Sintaks:
Margin: margin-top = margin-right = margin-bottom = margin-left

contoh:
.left {
margin: 15px;
}
berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px.

Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left

contoh:
.left {
margin: 15px 20px;
}

berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px;

Sintaks:
margin: margin-top | margin left = margin right | margin bottom
.left {
margin: 15px 20px 30px;
}
berarti, margin atas 15px, margin kiri dan kanan 20px, dan margin bawah 30px.