Halo teman-teman! Kali ini kita akan membahas tentang Kamus CSS beserta fungsinya, yang akan sangat berguna buat kalian yang sedang belajar atau mengembangkan website. CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen HTML di web. Supaya lebih mudah dipahami, yuk kita lihat beberapa properti CSS paling lengkap beserta fungsi utamanya.
Properti CSS dan Fungsinya
| Properti CSS | Fungsi |
|---|---|
color | Mengatur warna teks. |
background-color | Mengatur warna latar belakang elemen. |
background-image | Menentukan gambar latar belakang. |
background-size | Mengatur ukuran gambar latar belakang. |
font-size | Menentukan ukuran huruf. |
font-family | Menentukan jenis huruf (font) yang digunakan. |
font-weight | Mengatur ketebalan huruf. |
font-style | Mengatur gaya huruf (normal, italic). |
line-height | Mengatur jarak antar baris teks. |
letter-spacing | Mengatur jarak antar huruf. |
word-spacing | Mengatur jarak antar kata. |
text-align | Mengatur perataan teks (left, center, right, justify). |
text-decoration | Menambahkan dekorasi teks (underline, overline, none). |
text-transform | Mengubah huruf besar/kecil pada teks. |
margin | Memberi ruang di luar batas elemen. |
padding | Memberi ruang di dalam batas elemen, antara konten dan border. |
border | Menambahkan garis batas di sekitar elemen. |
border-radius | Mengatur lengkungan sudut elemen. |
box-shadow | Menambahkan bayangan pada elemen. |
width | Mengatur lebar dari elemen. |
height | Mengatur tinggi dari elemen. |
max-width | Menentukan lebar maksimum elemen. |
min-height | Menentukan tinggi minimum elemen. |
display | Menentukan bagaimana elemen ditampilkan (block, inline, flex, grid). |
visibility | Mengatur apakah elemen terlihat atau tidak. |
opacity | Mengatur tingkat transparansi elemen. |
position | Mengatur posisi elemen (static, relative, absolute, fixed, sticky). |
top, right, bottom, left | Menentukan posisi elemen terhadap kontainer. |
z-index | Menentukan urutan tumpukan elemen pada layer. |
overflow | Mengatur perilaku konten yang melebihi ukuran elemen. |
cursor | Menentukan bentuk kursor saat berada di atas elemen. |
transition | Menambahkan efek transisi ketika properti berubah. |
animation | Mengatur animasi elemen. |
transform | Mengubah skala, rotasi, atau posisi elemen. |
flex | Properti utama dalam layout flexbox. |
justify-content | Mengatur perataan isi dalam flex container. |
align-items | Mengatur perataan item secara vertikal di flex container. |
gap | Mengatur jarak antar elemen dalam grid/flex container. |
grid-template-columns | Mengatur jumlah dan ukuran kolom dalam grid layout. |
grid-template-rows | Mengatur jumlah dan ukuran baris dalam grid layout. |
object-fit | Mengontrol bagaimana gambar/video diubah ukurannya untuk cocok ke kontainer. |
box-sizing | Mengatur apakah padding dan border termasuk dalam ukuran elemen. |
filter | Menambahkan efek visual seperti blur, brightness, dsb. |
backdrop-filter | Memberikan efek ke latar belakang elemen (blur, grayscale, dsb). |
clip-path | Memotong elemen ke dalam bentuk tertentu (lingkaran, polygon, dll). |
content | Digunakan untuk menyisipkan konten dalam pseudo-element. |
pointer-events | Mengontrol apakah elemen dapat menerima interaksi mouse. |
scroll-behavior | Mengatur perilaku scroll (misalnya smooth scroll). |
user-select | Mengontrol apakah teks bisa diseleksi oleh pengguna. |
white-space | Mengontrol bagaimana whitespace dalam elemen ditangani. |
Penjelasan Tambahan
- Shorthand Properties: Beberapa properti CSS bisa ditulis singkat, misalnya
margin: 10px 20px;berarti margin atas/bawah 10px dan kiri/kanan 20px. - Inheritance: Properti tertentu seperti
colordanfont-familyakan diwariskan oleh elemen anak dari elemen induk. - Selector: CSS bekerja berdasarkan selector seperti tag (
p,div), class (.namaClass), ID (#idUnik), atau bahkan selector kombinasi.
Contoh Penggunaan CSS
body{background-color:#f0f0f0;font-family:Arial,sans-serif;color:#333}h1{font-size:2em;text-align:center}.container{width:80%;margin:auto;padding:20px;border:1px solid #ccc;background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);border-radius:8px;}Kesimpulan
Itulah tadi artikel dari kodeviolet.com tentang Kamus CSS beserta fungsinya. Dengan memahami fungsi dari tiap properti CSS, kalian bisa lebih mudah dan efisien dalam mendesain tampilan website. Jangan lupa terus bereksperimen dan belajar lebih lanjut ya!
