10 Jenis Properti pada CSS

22 Jul 2019 11:57 1207 Hits 0 Comments Approved by Plimbi
Pengertian, berikut penjelasan dari macam-macam properti tersebut.

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

 

Tags

About The Author

Tineu Nursyifa 28
Novice

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel