Tahukah Kalian, Apa itu Property dan Value? Pengertian, Syntax (Sintaksis) dan Contohnya dalam Deklarasi atau CSS Declaration! Sedangkan HTML memiliki tag, CSS memiliki “selector” di mana itu adalah adalah nama yang diberikan untuk style (gaya) dalam lembar CSS internal dan eksternal seperti yang sudah kita bahas sebelumnya (baca pengertian CSS selector di sini). Untuk setiap pemilih dan penyeleksi ada “properti” di dalam kurung keriting, yang hanya berupa kata-kata seperti warna, “font-weight” atau “background-color”.
Sebelumnya, ada beberapa hal yang perlu kalian ketahui terlebih dahulu terutama terkait penerapan dan penulisannya sendiri, adapun value atau nilai tersebut diberikan (dituliskan) ke properties setelah tanda titik dua (bukan tanda sama dengan “=” seperti pada HTML) dan simbol titik dua “;” digunakan untuk memisahkannya. Berdasarkan hal tersebut, dalam postingan kali ini, Kami akan membahas secara lebih detail dan lengkap tentang apa itu property dan value pada deklarasi atau CSS declaration. Langsung saja, berikut ini adalah ulasannya!
Daftar Isi Konten:
Apa itu Deklarasi atau CSS Declaration?
Jadi, apa sebenarnya yang dimaksud dengan deklarasi atau CSS declaration? Benar, pengaturan properti CSS ke nilai-nilai spesifik adalah fungsi inti dari bahasa CSS.
Pasangan CSS property (properti) dan value (nilai) disebut declaration, dan mesin CSS mana pun yang menghitung deklarasi mana yang berlaku untuk setiap elemen tunggal halaman untuk tata letak yang sesuai, dan untuk mendesainnya.
Property dan value adalah case-sensitive (peka huruf kecil-besar) di CSS. Pasangan ini dipisahkan oleh titik dua : atau U+003A Colon, dan spasi putih sebelum, di antara, dan setelah property dan value, tetapi tidak harus.
Pengertian CSS Property dan Value
Seperti yang sudah Kami sebutkan di atas, pasangan ini akan membentuk deklarasi dalam CSS (baca pengertian CSS di sini), oleh karena itu memahami apa pengertiannya adalah merupakan hal yang penting.
Berikut ini adalah penjelasan arti dan pengertian property dan value pada CSS.
a. Pengertian CSS Property
Properti atau CSS property adalah bagian dari rule (aturan) CSS yang menentukan aspek CSS selector mana yang akan diubah secara visual.
Ini biasanya dituliskan dalam deklarasi atau CSS declaration dengan memasukkan tanda titik dua “:” setelah penulisan propertinya.
Ketika Anda menulis CSS property (properti), Anda tidak bisa membuatnya begitu saja sesuai keinginan Anda.
Sebagai contoh, “color” adalah properti CSS yang sebenarnya, sehingga Anda dapat menggunakannya.
Properti ini menentukan warna teks suatu elemen. Jika Anda mencoba menggunakan “text-color” atau “font-color” sebagai properti CSS, ini tentunya akan gagal karena mereka bukan bagian dari bahasa CSS.
Contoh lainnya adalah CSS property “background-image”, ini digunakan untuk menetapkan gambar yang dapat digunakan untuk latar belakang, seperti penulisan kode berikut ini:
.logo {
background-image: url (/images/logo-perusahaan.png);
}
Jika Anda mencoba menggunakan “background-picture” atau “background-graphic” sebagai CSS property, mereka akan gagal dibaca karena, sekali lagi, ini bukanlah properti CSS sebenarnya yang cocok.
Ada sejumlah properti atau CSS property yang dapat Anda gunakan untuk mendesain situs, beberapa contoh di antaranya adalah seperti:
- Border
- Padding
- Margins
- Font-family
- Font-size
- Background-color
- Width
- Height
Properti CSS ini bagus untuk digunakan sebagai contoh, karena semuanya terbilang sangat mudah dan bahkan jika Anda tidak tahu apa itu CSS, Anda mungkin dapat menebak apa yang mereka lakukan berdasarkan namanya.
Ada properti CSS lain yang akan Anda temui juga yang mungkin tidak jelas bagaimana mereka bekerja berdasarkan namanya, misalnya seperti:
- Float
- Clear
- Overflow
- Text-transform
- Z-index
Ketika Anda masuk lebih dalam ke web design desain web, Anda akan menemukan (dan menggunakan) semua properti ini dan banyak lagi selain itu!
b. Pengertian CSS Value
Nilai atau CSS value adalah nilai-nilai yang diatur pada properti atau CSS property yang merupakan bagian dari rule (aturan) CSS dan berada di dalam blok deklarasi atau CSS declaration.
Untuk setiap CSS selector (pemilih atau penyeleksi) ada “property” di dalam tanda kurung keriting “{}”, yang berupa kata-kata seperti “color”, “font-weight” atau “background-color”, di mana mereka berisi nilai atau CSS value.
Value (nilai) tersebut diberikan ke properti setelah tanda titik dua “:” dan tanda titik dua “;” digunakan untuk memisahkan propertinya.
Sebagai contoh, pemberian nilah ukuran font dengan warnanya pada elemen p adalah sebagai berikut:
p {
font-size: 13px;
color: blue;
}
Kode pada contoh di atas akan menerapkan nilai yang diberikan ke ukuran font dan properti warna ke selector p.
Jadi pada intinya, ketika CSS value diterapkan pada dokumen HTML, teks di antara tag tubuh (yang merupakan isi dari seluruh jendela) akan berukuran 13 piksel dan berwarna blue (biru).
Itulah pada dasarnya yang harus kita pahami terutama dalam mempelajari dan mengenal property dan value dalam deklarasi dan CSS declaration.
Sebelum CSS3 (baca pengertian CSS3 di sini), level atau versi CSS 2.1 sudah memungkinkan jenis value (nilai) seperti integer dan bilangan real, panjang, persentase, URL dan URI, counters, warna, string, serta unsupported value.
Sintaksis dan Contoh Property dan Value pada CSS
Setelah kita mengetahui apa itu pengertian CSS property dan value pada deklarasi atau CSS declaration di atas, agar lebih memahaminya kita akan lanjut pada pembahasan syntax (sintaksis) dan contohnya.
Jika Anda menelusuri daftar lengkap CSS properties, Anda akan menemukan bahwa masing-masing dari mereka memiliki nilai spesifik yang akan mereka gunakan untuk membuat style (gaya) yang mereka inginkan.
Ya, rule (aturan) CSS terdiri dari 2 (dua) bagian yang berbeda yaitu adalah CSS selector dan declaration.
CSS selector menentukan apa yang sedang ditata pada halaman dan CSS declaration (deklarasi) adalah bagaimana sesuatunya seharusnya ditata, seperti contoh berikut:
p {
color: #000;
}
Ini adalah CSS rule. Bagian selector (pemilih) adalah “p”, yang merupakan HTML element untuk “paragraf”.
Karena itu, dia akan memilih semua paragraf di situs website dan memberikan gaya ini (kecuali ada paragraf yang ditargetkan oleh gaya yang lebih spesifik di tempat lain dalam dokumen CSS Anda).
Pada deklarasi atau CSS declaration di atas ada property dan value. Bagian dari aturan yang bertuliskan color: #000; adalah apa yang dikenal sebagai declaration (deklarasi).
CSS declaration (deklarasi) terdiri dari 2 (dua) bagian, yaitu property (properti) dan value (nilainya).
Property (properti) adalah bagian “color” dari deklarasi di atas.
Ini menentukan aspek pemilih mana yang tampilan atau penampakan visualnya yang akan dirubah.
Sedangkan value (nilainya) adalah bagaimana properti CSS yang dipilih tersebut akan diubah.
Dalam contoh penulisan kode di atas, Kami menggunakan nilai hex #000, yang merupakan singkatan CSS untuk warna “hitam”.
Jadi ketika menggunakan rule (aturan) CSS ini, halaman kita akan memiliki paragraf yang ditampilkan dalam font (baca pengertian font di sini) warna hitam.
Property atau Properti Membutuhkan Value (Nilai) pada CSS
Dalam membahas pengertian apa itu CSS property dan value pada deklarasi atau CSS declaration, ada beberapa hal yang perlu kalian garis bawahi.
Ingat! Setiap kali Anda menggunakan property (properti), Anda harus memberikannya value (nilai) dan properti tertentu hanya dapat menerima nilai tertentu!
Pada contoh pertama dari properti “color”, kita perlu menggunakan nilai warna.
Ini bisa berupa nilai hex, nilai RGBA, atau bahkan kata kunci warna.
Hanya salah satu dari nilai-nilai tersebut yang akan berfungsi.
Jika Anda menggunakan kata seperti “hitam” dengan properti ini, itu tidak akan menghasilkan apa-apa karena, sejelas kata itu, nilai itu bukan nilai yang diakui dalam CSS.
Contoh kedua di atas yaitu “background-image” membutuhkan jalur atau sumber gambar yang digunakan untuk mengambil gambar yang sebenarnya dari file situs Anda, di mana itu adalah value (nilai) dari sintaks yang diperlukan.
Semua properti CSS memiliki nilai yang mereka perlukan, misalnya seperti:
- Properti “border-color” memerlukan nilai warna.
- Lalu, “border-size” memerlukan nilai ukuran, seperti piksel atau persentase.
- Dan, “border-style” mengharapkan salah satu gaya khusus yang digunakan untuk propertinya, seperti “solid.”
Kesimpulan
Bagaimana, sudah cukup jelas bukan? Baiklah, berdasarkan penjelasan dan pembahasan Apa itu Property dan Value? Pengertian, Syntax (Sintaksis) dan Contohnya dalam Deklarasi atau CSS Declaration di atas, dapat kita simpulkan seperti ini, deklarasi atau CSS declaration adalah rangkaian rule (aturan) CSS yang terdiri dari nama property (properti) yang didefinisikan dalam selector (penyeleksi) dengan mendefinisikan CSS property dan value. Setiap deklarasi menyertakan nama properti CSS dan nilainya yang dipisahkan oleh titik dua.
Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal. Setiap aturan CSS dapat memiliki properti sebanyak yang Anda suka. Masing-masing dari mereka berlaku untuk elemen yang berlaku untuk pemilih.
Penutup
Demikianlah ulasan yang dapat Kami bagikan dalam postingan yang membahas mengenai Apa itu Property dan Value? Pengertian, Sintaks dan Contohnya dalam Deklarasi atau CSS Declaration. Semoga artikel yang Kami bagikan di sini dapat bermanfaat serta menambah wawasan Kita semua terutama dalam belajar teknologi informasi beserta istilah-istilah teknologinya.
Jangan lupa share artikel atau tulisan Kami di sini kepada teman, kerabat serta rekan belajar kalian jika kalian rasa ini bermanfaat. Sekian dari Saya, Terima Kasih.
Postingan ini juga tersedia dalam versi:
