Pada artikel sebelumnya saya telah membahas tentang selector pada CSS dengan penjeasannya. Nah untuk artikel yang kali ini saya akan membahas tentang property pada CSS.
Â
Properti-properti pada CSS
Properti CSS merupakan sifat yang bisa kita terapkan pada selector, misalnya dengan memberikan warna text, warna background, dan lain sebagainya. Jika terdapat properti pada penulisan kode CSS, properti tersebut pasti akan memiliki sebuah nilai atau disebut dengan value.
Untuk memberikan nilai (value)pada property CSS, dapat menggunakan tanda titik dua(:) setelah penulisan property, dan diakhiri dengan tanda titik koma (:). Lalu bagiamana cara kita memilih property yang mana yang akan kita gunakan?
Untuk pemilihan property itu sendiri caranya sangat mudah, mengapa begitu? Karena property CSS mirip dengan bahasa inggris. Misalnya jika kita ingin memberikan warna, maka kita cukup menggunakan property ‘color’.
Dalam CSS ini, terdapat beberapa macam property, yaitu:
Â
1. Background Property
Property background pada CSS disebut juga sebagai latar belakang, property background ini digunakan untuk menentukan efek latar belakang pada sebuah elemen.
Background tersebut bisa berupa gambar, warna dan lain sebagainya. Berikut merupakan properti pada background tersebut:
| PROPERTI | KETERANGAN |
| Background-color | Memberi warna pada latar belakang |
| Background-image | Memberi gambar pada latar belakang suatu elemen |
| Background-repeat | Memberi perintah pada gambar yang ada di latar belakang untuk perulangan |
| Background-postion | Mengatur posisi gambar pada latar belakang |
| Background-attachment | Mengatur suatu gambar apakah jika discrol gambar ikut scroll atau tetap |
| Background-size | Menentukan ukuran gambar pada latar belakang |
| Background-clip | Menentukan aturan lukisan pada latar belakang |
| Background-origin | Menentukan dimana sebuah diposisikan |
| Background | Mengatur latar belakang pada elemen secara luas |
Â
2. Border Property
Border properti merupakan properti yang digunakan untuk mengatur dan memberi garis pada elemen atau selector dengan berbagai variasi lebar serta warna pada garis tersebut. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Border | Mengatur garis secara keseluruhan |
| Border-widht | Mengatur lebar garis secara keseluruhan |
| Border-top-width | Mengatur lebar garis atas |
| Border--right-width | Mengatur lebar garis kanan |
| Border-bottom-width | Mengatur lebar garis bawah |
| Border-left-width | Mengatur lebar garis kiri |
| Border-color | Mengatur warna dari garis |
| Border-style | Mengatur style dari garis |
| Border-top | Membuat garis atas |
| Border-right | Membuat garis kanan |
| Border-bottom | Membuat garis bawah |
| Border-left | Membuat garis kiri |
| Border-radius | Membuat sudut bulat atau radius pada garis |
Â
3. Font Property
Font properti pada CSS digunakan untuk menentukan jenis font, huruf tebal, ukuran, dan gaya teks pada halaman web sesuai dengan yang diinginkan. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Font | Mengatur semua font properties dalam suatu deklarasi |
| Font-weight | Mengatur ketebalan dari text |
| Font-size | Mengatur ukuran font |
| Font-family | Mengatur jenis font |
| Font-style | Mengatur style font |
| Font-variant | Mengatur font menjadi huruf kecil atau tidak |
Â
4. Margin Property
Margin adalah sebuah kode yang mengatur seleksi batas jarak luar. Margin properti pada CSS digunakan untuk membuat ruang kosong disekitar box atau elemen bagian yang luar sesuai dengan yang diinginkan. Kita bisa mengatur margin pada sisi kanan, sisi kiri,sisi atas dan sisi bawah secara terpisah. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Margin-top | Mengatur jarak antar elemen bagian atas |
| Margin-right | Mengatur jarak antar elemen bagian kanan |
| Margin-bottom | Mengatur jarak antar elemen bagian bawah |
| Margin-left | Mengatur jarak antar elemen bagian kiri |
| Margin | Mengatur jarak antar elemen bagian secara keseluruhan |
Â
5. Padding Property
Padding adalah sebuah kode yang mengatur seleksi batas jarak dalam. Padding properti pada CSS digunakan untuk menghasilkan ruang kosong disekitar konten elemen bagian dalam atau didalam batas yang telah ditentukan. Kita bisa mengatur padding pada setiap sisi elemen baik itu sisi atas, bawah, kanan, dan sisi kiri. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Padding-top | Mengatur ruang pada elemen dengan konten bagian atas |
| Padding-right | Mengatur ruang pada elemen dengan konten bagian kanan |
| Padding-bottom | Mengatur ruang pada elemen dengan konten bagian bawah |
| Padding-left | Mengatur ruang pada elemen dengan konten bagian kiri |
| Padding | Mengatur ruang pada elemen dengan konten secara keseluruhan |
Â
6. Property Lebar dan Tinggi
Properti ini merupakan peroperti yang digunakan untuk mengatur tinggi dan lebar suatu elemen. Kita bisa mengatur tinggi dan lebar suatu elemen secara otomatis atau bisa juga dalam bentuk nilai seperti ukuran pixel, cm, em, persen dan lain sebagainya. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Width | Mengatur lebar pada elemen |
| Height | Mengatur tinggi pada elemen |
| Max-width | Mengatur lebar pada elemen secara maksimum |
| Max-height | Mengatur tinggi pada elemen secara maksimum |
| Min-width | Mengatur lebar pada elemen secara minimum |
| Min-height | Mengatur tinggi pada elemen secara minimum |
Â
7. Text Property
Properti text ini merupakan sebuah properti yang digunakan untuk mengatur atau memformat tulisan sesuai dengan yang kita inginkan. Berikut beberapa propertinya:
| PROPERTI | KETERANGAN |
| Color | Memberi warna pada text |
| Direction | Menentukan arah penulisan text |
| Letter-spacing | Menegatur jarak spasi antar karakter/huruf |
| Line-height | Mengatur jarak garis |
| Text-align | Mengatur posisi dari text (center, left, right) |
| Text-decoration | Menentukan dekorasi yang akan ditambah ke text |
| Text-indent | Menentukan margin atau lekukan dari barisan pertama dalam blok text |
| Text-overflow | Untuk menyembunyikan, menampilkan atau membuat scroll pada content atau pada gambar |
| Text-shadow | Memberikan efek bayangan pada text atau pada kata |
| Text-transform | Mengontrol kapitalisasi dari text |
| Unicode-bidi | Mengontrol dan mengarahkan pada tulisan unicode |
| Vertical-align | Mengatur perataan vertikal pada elemen (middle, bottom) |
| White-space | Mengatur keseluruhan spasi pada elemen |
| Word-spacing | Mengatur jarak spasi antar kata atau antar text |
Â
8. Display Property
| PROPERTI | KETERANGAN |
| Display-none | Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut |
| Display-blok | Berfungsi untuk memberi blok baru atau baris baru seperti kode |
| Display-inline | Berfungsi untuk memberi desain background berbeda hanya pada elemen tersebut |
| Display-inline-block | Jika layar tidak muat maka otomatis membuat baris baru |
Â
9. Border Radius property
| PROPERTI | KETERANGAN |
| Border-radius | Garis melengkung disemua sisi |
| Border-top-left-radius | Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda |
| Border-top-right-radius | Garis melengkung pada sisi atas dan kanan dengan ukuran yang berbeda |
| Border-bottom-right-radius | Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda |
| Border-bottom-left-radius (2em 1em) | Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda |
| Border-bottom-left-radius (2em) | Garis melengkung pada sisi bawah dan kiri dengan ukuran sama |
Â
10. Position Property
| PROPERTI | KETERANGAN |
| Position-static | Elemen render dalam rangka, seperti yang muncul dalam aliran |
| Position-absolute | Unsur diposisikan relatif terhadap posisi pertama |
| Position-fixed | Unsur diposisikan relatif terhadap jendela browser |
| Position-relative | Elemen diposisikan terhadap posisi normal, sehingga "left:20" menembahkan 20 pixel ke posisi kiri elemen |
Â
![Pencarian Data dari Tabel MySQL Menggunakan Regular [removed]REGEXP)](http://srv1.portal.p-cd.net/700x450/2019/09/25/175345-1569380884-807837.png)
