Belajar Koding HTML & CSS Bagian 22: Membuat Shorthand Dengan CSS
.png)
Dalam HTML & CSS, shorthand
adalah cara menulis properti CSS yang kompleks secara ringkas. Shorthand
berguna untuk merapikan kode dan meningkatkan efisiensi. Berikut beberapa
contoh shorthand yang sering digunakan:
1. Margin & Padding
/* Shorthand */
margin: 10px 20px 30px 40px;
/* Sama dengan */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Urutan: atas | kanan | bawah |
kiri
Jika hanya menulis dua nilai, misalnya: margin:
10px 20px;
Artinya: atas & bawah 10px, kanan & kiri 20px
2. Font
font: italic small-caps bold 16px/1.5 "Arial",
sans-serif;
Format umum:
font: [style] [variant] [weight]
[size]/[line-height] [family];
3. Background
background: #fff url('image.jpg') no-repeat center center /
cover;
4. Border
border: 2px solid red;
/* Sama dengan */
border-width: 2px;
border-style: solid;
border-color: red;
5. List-style
css
CopyEdit
list-style: square inside none;
/* Sama dengan */
list-style-type: square;
list-style-position: inside;
list-style-image: none;
💻 Contoh Kode HTML & CSS dengan
Shorthand
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
CSS Shorthand</title>
<style>
body {
margin: 0;
padding: 0;
font: italic
small-caps bold 16px/1.5 "Arial", sans-serif;
background: #f0f0f0
url('background.jpg') no-repeat center center / cover;
}
.kotak {
width: 300px;
height: 150px;
margin: 20px
auto;
padding: 15px 25px;
border: 3px
dashed #3498db;
background: #ffffff;
box-shadow: 0 4px
8px rgba(0, 0, 0, 0.1);
}
ul {
list-style:
square inside none;
}
</style>
</head>
<body>
<div class="kotak">
<h2>Contoh
Shorthand CSS</h2>
<ul>
<li>Margin
& Padding</li>
<li>Font</li>
<li>Border</li>
<li>Background</li>
<li>List-style</li>
</ul>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Membuat Shorthand CSS |
🧠Penjelasan Shorthand yang Digunakan
- margin dan padding:
- margin:
20px auto;
→ Atas & bawah: 20px; Kiri & kanan: otomatis (untuk memusatkan
elemen).
- padding:
15px 25px;
→ Atas & bawah: 15px; Kiri & kanan: 25px.
- font:
- font:
italic small-caps bold 16px/1.5 "Arial", sans-serif; menggabungkan beberapa
properti font dalam satu baris.
- background:
- background:
#f0f0f0 url('background.jpg') no-repeat center center / cover; mengatur warna latar
belakang, gambar, pengulangan, posisi, dan ukuran sekaligus.
- border:
- border:
3px dashed #3498db;
mengatur lebar, gaya, dan warna border dalam satu deklarasi.
- list-style:
- list-style:
square inside none;
mengatur tipe marker, posisi, dan gambar list.
📚 Referensi Tambahan
Untuk informasi lebih lanjut tentang
properti shorthand CSS, Anda dapat mengunjungi:
0 Response to "Belajar Koding HTML & CSS Bagian 22: Membuat Shorthand Dengan CSS"
Post a Comment