10 Jenis Properti pada CSS

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