Sebelemunya kita sudah belajar cara membuat selector pada css untuk menyeleksi element yang ingin kita berikan styling.
Tahap selanjutnya, kita akan belajar tentang apa itu propeti, macam-macam properti dan cara menggunakannya.
advertisement
Yu kita mulai tutorialnya dengan pertanyaa,
Daftar Isi
- Apa Itu Properti Css?
- Macam-Macam Properti Css
- Properti css animation
- Properti css background
- Properti css border
- Properti css column layout
- Properti css content
- Properti css display
- Properti css flexible
- Properti css font
- Porperti css grid layout
- Properti css list
- Properti css margin
- Properti css outline
- Properti css padding
- Properti css print
- Properti css size
- Properti css table
- Properti css text
- Properti css transform
- Properti css transition
Apa Itu Properti Css?
Properti merupakan sebuah aturan yang di terapkan pada sebuah selector agar elemen html yang terseleksi memiliki ciri dan sifat tertentu tergantung propeti dan nilai yang diberikan.
Pada eksternal dan internal css, properti wajib ditulis didalam block selector. Sedangkan pada inline css kita bisa langsung menulis properti beserta nilai yang diberikan.
Macam-Macam Properti Css
Ada banyak sekali properti css yang bisa kita atur nilai sesuai kebutuhan.
Berikut list properti css yang sudah admin kelompokan berdasarkan fungsinya.
Properti css animation
Properti ini digunakan untuk membuat animasi pada element,
| Properti | Keterangan | Nilai |
| animation | Digunakan untuk memberikan animasi pada element secara singkat | name duration timing-function delay iteration-count direction fill-mode play-state |
| animation-delay | Digunakan untuk mengatur jeda dari animasi | time | initial | inherit |
| animation-direction | Digunakan untuk menentukan arah dari animasi | normal | reverse | alternate | alternate-reverse | initial | inherit |
| animation-duration | Digunakan untuk mengatur durasi dari animasi | time | initial | inherit |
| animation-fill-mode | Digunakan untuk mengatur animasi ketika dalam kondisi awal dan akhir | none | forwards | backwards | both | initial | inherit |
| animation-iteration-count | Digunakan untuk mengatur berapa kali animasi di mainkan | number | infinite | initial | inherit |
| animation-name | Digunakan untuk memberikan nama pada animasi | keyframename | none | initial | inherit |
| animation-play-state | Digunakan untuk menentukan kondisi awal animasi ketika element di muat | paused | running | initial | inherit |
| animation-timing-function | Digunakan untuk mengatur animasi pada setiap frame selama durasi (animasi efek) | linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit |
Properti css background
Properi ini digunakan untuk mengatur tampilan latar belakang,
| Properti | Keterangan | Nilai |
| background | Digunakan untuk mengatur latar belakang element secara umum | bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit |
| background-attachment | Digunakan untuk mengatur latar belakang berupa gambar bagaimana gambar tersebut di lampirkan | scroll | fixed | local | initial | inherit |
| background-clip | Digunakan untuk mengatur latar belakang | border-box | padding-box | content-box | initial | inherit |
| background-color | Digunakan untuk memberikan warna pada latar belakang element | color | transparent | initial | inherit |
| background-image | Digunakan untuk memberikan latar belakang berupa gambar | url | none | initial | inherit |
| background-origin | Digunakan untuk menentukan posisi asli dari latar belakang gambar | background-origin: padding-box | border-box | content-box | initial | inherit |
| background-position | Digunakan untuk memenentukan posisi pada latar belakang gambar | position position |
| background-repeat | Digunakan untuk menentukan gaya implementasi gambar dalam mode tiles | repeat | repeat-x | repeat-y | no-repeat | initial | inherit |
| background-size | Digunakan untuk menentukan gaya ukuran dari latar belakang gambar | auto | length | cover | contain | initial | inherit |
Properti css border
Properti ini digunakan untuk mengatur tampilan bingkai pada element,
| Properti | Keterangan | Nilai |
| border | Digunakan untuk mengatur border secara singkat | border-width border-style border-color | initial | inherit |
| border-bottom | Digunakan untuk mengatur border bagian bawah | border-width border-style border-color | initial | inherit |
| border-bottom-color | Digunakan untuk mengatur warna border bagian bawah | color | transparent | initial | inherit |
| border-bottom-left-radius | Digunakan untuk megatur radius pada corner bagian kiri bawah | length | % [length | %] | initial | inherit |
| border-bottom-right-radius | Digunakan untuk mengatur radius pada corner bagian kanan bawah | length | % [length | %] | initial | inherit |
| border-bottom-style | Digunakan untuk mengatur syle border bagian bawah | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| border-bottom-width | Digunakan untuk mengatur lebar border bagian bawah | medium | thin | thick | length | initial | inherit |
| border-color | Digunakan untuk mengatur warna border | color | transparent | initial | inherit |
| border-image | Digunakan untuk membuat border menggunakan gambar | source slice width outset repeat | initial | inherit |
| border-image-outset | Digunakan untuk mengatur jarak image dengan border box | length | number | initial | inherit |
| border-image-repeat | DIgunakan untuk mengatur gaya implementasi gambar dalam mode tiles | stretch | repeat | round | initial | inherit |
| border-image-slice | Digunakan mengatur cara pengirisan gambar pada border image | number | % | fill | initial | inherit |
| border-image-source | Digunakan untuk menentukan source gambar pada border image | none | url (image) | initial | inherit |
| border-image-width | Digunakan untuk mengatur lebar gambar pada border image | number | % | auto | initial | inherit |
| border-left | Digunakan untuk mengatur border bagian kiri | border-width border-style border-color | initial | inherit |
| border-left-color | Digunakan untuk mengatur warna border bagian kiri | color | transparent | initial | inherit |
| border-left-style | Digunakan untuk mengatur gaya border bagian kiri | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| border-left-width | Digunakan untuk mengatur lebar border bagian kiri | medium | thin | thick | length | initial | inherit |
| border-radius | Digunakan untuk mengatur border pada semua sisi pojok | length | % [length | %] | initial | inherit |
| border-right | Digunakan untuk mengatur border bagian kanan | border-width border-style border-color | initial | inherit |
| border-right-color | Digunakan untuk mengatur warna border bagian kanan | color | transparent | initial | inherit |
| border-right-style | Digunakan untuk mengatur style border bagian kanan | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| border-right-width | Digunakan untuk mengatur lebar border bagian kanan | medium | thin | thick | length | initial | inherit |
| border-style | Digunakan untuk mengatur style border pada semua sisi | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| border-top | Digunakan untuk mengatur border bagian atas | border-width border-style border-color | initial | inherit |
| border-top-color | Digunakan untuk mengatur warna border bagian atas | color | transparent | initial | inherit |
| border-top-left-radius | Digunakan untuk mengatur boder radius bagian pojok kiri atas | length | % [length | %] | initial | inherit |
| border-top-right-radius | Digunakan untuk mengatur boder radius bagian pojok kanan atas | length | % [length | %] | initial | inherit |
| border-top-style | Digunakan untuk mengatur boder style bagian atas | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| border-top-width | Digunakan untuk mengatur lebar boder bagian atas | medium | thin | thick | length | initial | inherit |
| border-width | Digunakan untuk mengatur lebar boder secara pada setiap sisi | medium | thin | thick | length | initial | inherit |
Properti css column layout
Properti ini digunakan untuk membuat tata letak dalam mode kolom,
| Properti | Keterangan | Nilai |
| columns | Digunakan untuk membuat layout kolom secara singkat | auto | column-width column-count | initial | inherit |
| column-count | Digunakan untuk menentukan jumlah konten pada layout kolom | number | auto | initial | inherit |
| column-fill | Digunakan untuk menentukan cara mengisi area kolom seimbang atau tidak | balance | auto | initial | inherit |
| column-gap | Digunakan untuk menentukan lebar ruang antara kolom | length | normal | initial | inherit |
| column-rule | Digunakan untuk lebar, style dan warna pembatas | column-rule-width column-rule-style column-rule-color | initial | inherit |
| column-rule-color | Digunakan untuk mengatur warna pembatas | color | initial | inherit |
| column-rule-width | Digunakan untuk mengatur lebar pembatas | medium | thin | thick | length | initial | inherit |
| column-span | Digunakan untuk menentukan berapa banyak kolom yang harus direntangkan oleh sebuah elemen | none | all | initial | inherit |
| column-width | Digunakan untuk mengatur lebar pada setiap kolom | auto | length | initial | inherit |
Properti css content
Properti ini biasanya digunakan untuk mengatur pseudo element,
| Properti | Keterangan | Nilai |
| content | Memberikan isi konten pada pseudo element | normal | none| counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit |
| counter-increment | Digunakan untuk membuat increment pada pseudo element | none | id | initial | inherit |
| counter-reset | Digunakan untuk mereset increment pada pseudo element | none | name number | initial | inherit |
| quotes | Digunakan untuk menentukan gaya pada quote | none | string | initial | inherit |
Properti css display
Properti ini digunakan untuk mengatur tampilan pada element,
| Properti | Keterangan | Nilai |
| display | Digunakan untuk menentukan gaya implementasi element ketika ditampilkan | inline | block | contents | flex | grid | inline-block | width values | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit |
| position | Digunakan untuk menentukan posisi element | static | absolute | fixed | relative | sticky | initial | inherit |
| top | Digunakan untuk mengatur jarak element dengan element lainnya pada bagaian atas pada position non static | auto | length | initial | inherit |
| right | Digunakan untuk mengatur jarak element dengan element lainnya pada bagaian kanan pada position non static | auto | length | initial | inherit |
| bottom | Digunakan untuk mengatur jarak element dengan element lainnya pada bagaian bawah pada position non static | auto | length | initial | inherit |
| left | Digunakan untuk mengatur jarak element dengan element lainnya pada bagaian kiri pada position non static | auto | length | initial | inherit |
| float | Digunakan untuk memposisikan element ke arah kiri atau kanan | none | left | right | initial | inherit |
| clear | Digunakan untuk mereset element ketika dalam mode float | none | left | right | initial | inherit |
| z-index | Digunakan untuk menentukan posisi index layer pada element position non static | auto | number | initial | inherit |
| overflow | Digunakan untuk menentukan gaya ketika element childern melebihi element parentnya | visible | hidden | scroll | auto | initial | inherit |
| overflow-x | Digunakan untuk menentukan gaya ketika element childern melebihi element parentnya dalam mode horizontal | visible | hidden | scroll | auto | initial | inherit |
| overflow-y | Digunakan untuk menentukan gaya ketika element childern melebihi element parentnya dalam mode vertical | visible | hidden | scroll | auto | initial | inherit |
| resize | Digunakan untuk menentukan apakah element dapat diresize atau tidak | none | both | horizontal | vertical | initial | inherit |
| clip | Digunakan untuk menentukan gaya jika element gambar melebihi element parentnya | auto | shape | initial | inherit |
| visibility | Digunakan untuk menentukan visibilitas pada element | visible | hidden | collapse | initial | inherit |
| cursor | Digunakan untuk menentukan gaya mouse cursor ketika berada di element terkait | type cursor | initial | inherit |
| box-shadow | Digunakan untuk memberikan bayang pada element | none | h-offset v-offset blur spread color | inset | initial | inherit |
| box-sizing | Digunakan untuk menentukan box area pada element | content-box | border-box | initial | inherit |
Properti css flexible
Properti flexible atau flex-box digunakan untuk membuat tampilan responsive dalam mode 1 dimensi (kolom atau baris),
advertisement
| Properti | Keterangan | Nilai |
| align-content | Digunakan untuk meluruskan konten pada element flexible box | stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit |
| align-items | Digunakan untuk meluruskan element item pada element flexible box | stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit |
| align-self | Digunakan untuk meluruskan element item itu sendiri | stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit |
| flex | Digunakan untuk menset flex item secara singkat | flex-grow flex-shrink flex-basis | auto | initial | inherit |
| flex-basis | Digunakan untuk menentukan panjang item flex-box | number | auto | initial | inherit |
| flex-direction | Digunakan untuk menentukan arah flex-box, mode baris atau kolom | row | row-reverse | column | column-reverse | initial | inherit |
| flex-flow | Digunakan untuk mengatur direction dan wrap | flex-direction flex-wrap | initial | inherit |
| flex-grow | Digunakan untuk menentukan seberapa banyak item akan berkembang relatif terhadap item fleksibel siblings | number | initial | inherit |
| flex-shrink | Digunakan untuk menentukan seberapa banyak item akan menyusut relatif terhadap item fleksibel siblings | number | initial | inherit |
| flex-wrap | Digunakan untuk menentukan apakah item dapat di wrap atau tidak | nowrap | wrap | wrap-reverse | initial | inherit |
| justify-content | Digunakan untuk meluruskan item flex-box | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit |
| order | Digunakan untuk mengurutkan item flex-box | number | initial | inherit |
Properti css font
Seperti namnya, properti ini digunakan untuk mengatur font pada element,
| Properti | Keterangan | Nilai |
| font | Digunakan untuk mengatur font pada element secara singkat | font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit |
| font-family | Digunakan untuk menentukan jenis font yang digunakan | family-name | generic-family | initial|inherit |
| font-size | Digunakan untuk menentukan ukuran font | digital size | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit |
| font-size-adjust | Digunakan untuk menambahkan sekala ukuran pada font dari ukuran awal | decimal | none | initial | inherit |
| font-stretch | Digunakan untuk membuat teks lebih sempit (padat) atau lebih luas (diperluas). | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit |
| font-style | Digunakan untuk menentukan gaya dari font | normal | italic | oblique | initial | inherit |
| font-variant | Digunakan untuk menentukan apakah teks harus ditampilkan dalam font huruf kecil atau tidak. | normal | small-caps | initial | inherit |
| font-weight | Digunakan untuk menentukan tebal tipisnya teks | 100-900 | normal | bold | bolder | lighter | number | initial | inherit |
Porperti css grid layout
Properti ini digunakan untuk membuat tata letak sebuah halaman web dalam mode grid tabel
| Properti | Keterangan | Nilai |
| grid | Digunakan untuk mengatur grid layout secara singkat | none | grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit |
| gap | Digunakan untuk mengatur ruang antar grid item | row-gap column-gap |
| grid-area | Digunakan untuk mengatur area pada grid layout | grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname |
| grid-auto-columns | Digunakan untuk mengatur ukuran pada setiap kolom | auto | max-content | min-content | length |
| grid-auto-flow | mengontrol bagaimana item yang ditempatkan secara otomatis dimasukkan ke dalam grid box. | row | column | dense | row dense | column dense |
| grid-auto-rows | Digunakan untuk mengatur ukuran pada setiap baris | auto | max-content | min-content | length |
| grid-column | Digunakan untuk mengatur kolom secara singkat | grid-column-start / grid-column-end |
| grid-column-end | Digunakan untuk mengatur kolom akhir | auto | span n | column-line |
| grid-column-gap | Digunakan untuk mengatur ruang antar kolom item grid | length |
| grid-column-start | Digunakan untuk mengatur kolom awal | auto | span n | column-line |
| grid-gap | Digunakan untuk mengatur ruang antar item grid | grid-row-gap grid-column-gap |
| grid-row | Digunakan untuk mengatur baris secara singkat | grid-row-start / grid-row-end |
| grid-row-end | Digunakan untuk mengatur baris akhir | auto | span n | column-line |
| grid-row-gap | Digunakan untuk mengatur ruang antar baris item grid | length |
| grid-row-start | Digunakan untuk mengatur baris awal | auto | span n | column-line |
| grid-template | Digunakan untuk mengatur template secara singkat | none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit |
| grid-template-areas | Digunakan untuk membuat template area | none | itemnames |
| grid-template-columns | Digunakan untuk membuat template kolom | none | auto | max-content|min-content | length | initial | inherit |
| grid-template-rows | Digunakan untuk mebuat template baris | none | auto | max-content|min-content | length | initial | inherit |
Properti css list
Properti ini digunakan untuk mengatur tampilan element list pada html.
| Properti | Keterangan | Nilai |
| list-style | Digunakan untuk mengatur style penanda pada item list | list-style-type list-style-position list-style-image | initial | inherit |
| list-style-image | Digunakan untuk membuat penanda pada item list dari gambar | none | url(source) | initial | inherit |
| list-style-position | Digunakan untuk mengatur posisi dari penanda pada item list | inside | outside | initial | inherit |
| list-style-type | Digunakan untuk mengatur tipe penanda pada item list | disc | circle | square | none | initial | inherit | etc |
Properti css margin
Properti ini digunaka untuk mengatur margin atau batas area luar pada element.
| Properti | Keterangan | Nilai |
| margin | Digunakan untuk mengatur margin pada setiap sisi element | length | auto | initial | inherit |
| margin-bottom | Digunakan untuk mengatur margin bagian bawah element | length | auto | initial | inherit |
| margin-left | Digunakan untuk mengatur margin bagian kiri element | length | auto | initial | inherit |
| margin-right | Digunakan untuk mengatur margin bagian kanan element | length | auto | initial | inherit |
| margin-top | Digunakan untuk mengatur margin bagian atas element | length | auto | initial | inherit |
Properti css outline
Properti ini digunakan untuk membuat garis tepi pada element. Bedanya dengan border adalah jika border mengatur garis pada area element, sedangankan outline mengatur garis pada area element beserta marginnya.
| Properti | Keterangan | Nilai |
| outline | Digunakan untuk mengatur outline secara singkat | outline-width outline-style outline-color | initial | inherit |
| outline-color | Digunakan untuk mengatur warna outline | color | transparent | initial | inherit |
| outline-offset | Digunakan untuk mengatur ruang antar element dengan outline | length | initial | inherit |
| outline-style | Digunakan untuk mengatur style pada outline | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
| outline-width | Digunakan untuk mengatur lebar outline | medium | thin | thick | length | initial | inherit |
Properti css padding
Properti css padding digunakan untuk mengatur batas area bagian dalam sehingga ada ruang antara element dengan kontennya.
| Properti | Keterangan | Nilai |
| padding | Digunakan untuk mengatur pading secara singkat | length | auto | initial | inherit |
| padding-bottom | Digunakan untuk mengatur pading bagian bawah element | length | auto | initial | inherit |
| padding-left | Digunakan untuk mengatur padding bagian kiri element | length | auto | initial | inherit |
| padding-right | Digunakan untuk mengatur padding bagian kanan element | length | auto | initial | inherit |
| padding-top | Digunakan untuk mengatur padding bagian atas element | length | auto | initial | inherit |
Properti css print
Properti ini digunakan untuk mengatur tampilan element ketika dalam mode print.
| Properti | Keterangan | Nilai |
| page-break-after | Digunakan untuk menambahkan page break setelah element target pada mode print | auto | always | avoid | left | right | initial | inherit |
| page-break-before | Digunakan untuk menambahkan page break sebelum element target pada mode print | auto | always | avoid | left | right | initial | inherit |
| page-break-inside | Digunakan untuk menentukan apakah pagebreak bisa dilakukan pada konten element target | auto | always | avoid | left | right | initial | inherit |
Properti css size
Properti ini digunakan untuk mengatur ukuran atau dimensi pada element.
| Properti | Keterangan | Nilai |
| height | Digunakan untuk mengatur ketinggian sebuah element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
| max-height | Digunakan untuk mengatur batasan ketinggian maksimal pada element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
| max-width | Digunakan untuk mengatur batasan lebar maksimal pada element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
| min-height | Digunakan untuk mengatur batasan ketinggian minimal pada sebuah element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
| min-width | Digunakan untuk mengatur batasan lebar minimal pada element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
| width | Digunakan untuk mengatur lebar pada element | length | fit-content | max-content | min-content | revert | auto | initial | inherit |
Properti css table
Properti ini digunakan untuk mengatur tampilan pada element tabel.
| Properti | Keterangan | Nilai |
| border-collapse | Digunakan untuk mengatur garis pembatas antar cell apakah berupa ruang atau garis | separate | collapse | initial | inherit |
| border-spacing | Digunakan untuk mengatur ukuran ruang pembatas antar cell ketika border-collapse bernilai separate | length | initial | inherit |
| caption-side | Digunakan untuk menentukan posisi caption pada table diatas atau dibawah | top | bottom | initial | inherit |
| empty-cells | Digunakan untuk menentukan apakah cell yang kosong harus diberikan border pembatas | show | hide | initial | inherit |
| table-layout | Digunakan untuk mengatur apakah ukuran kolom atau baris otomatis di sesuaikan atau di fixed | auto | fixed | initial | inherit |
Properti css text
Properti ini digunakan untuk mengatur tampilan konten teks pada sebuah element.
advertisement
| Properti | Keterangan | Nilai |
| direction | Digunakan untuk menentukan arah dari teks | ltr | rtl | initial | inherit |
| tab-size | Digunakan untuk mengatur ukuran tab pada teks | length | number | initial | inherit |
| text-align | Digunakan untuk menyelaraskan posisi teks | left | right | center | justify | initial | inherit |
| text-align-last | Digunkan untu | auto | left | right | center | justify | start | end | initial | inherit |
| text-decoration | Digukan untuk mengatur garis pada teks secara singkat | text-decoration-line text-decoration-color text-decoration-style | initial | inherit |
| text-decoration-color | Digunakan untuk mengatur warna garis pada teks | color | transparent | initial | inherit |
| text-decoration-line | Digunakan untuk mengatur garis teks | none | underline | overline | line-through | initial | inherit |
| text-decoration-style | Digunakan untuk mengatur gaya pada garis teks | solid | double | dotted | dashed | wavy | initial | inherit |
| text-indent | Digunakan untuk menentukan indentasi baris pertama dalam blok teks. | length | initial | inherit |
| text-justify | Digunakan untuk menentukan metode justify yang di gunakan ketika text-align bernilai justify | auto | inter-word | inter-character | none | initial | inherit |
| text-overflow | Digunakan untuk menentukan metode ketika teks konten melebihi element pembungkusnya | clip | ellipsis | string | initial | inherit |
| text-shadow | Digunakan untuk memeberikan bayang pada teks | h-shadow v-shadow blur-radius color | none | initial | inherit |
| text-transform | Digunakan untuk merubah teks menjadi huruf kafital,huruf besar atau huruf kecil | none | capitalize | uppercase | lowercase | initial | inherit |
| line-height | Digunakan untuk mengatur spasi antar baris | length | number | initial | inherit |
| vertical-align | Digunakan untuk menyelaraskan secara vertikal element di dalam teks dalam satu baris | baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit |
| letter-spacing | Digunakan untuk mengatur ukuran spasi antar huruf | length | number | initial | inherit |
| word-spacing | Digunakan untuk mengatur ukuran spasi antar kata | normal | number | initial | inherit |
| white-space | Digunakan untuk mengatur metode pada setiap spasi di implementasikan | normal | nowrap | pre | pre-line | pre-wrap | initial|inherit |
| word-break | Digunakan untuk mengatur apakah setiap kata pada teks dapat di break ketika melebihi element | normal | break-all | keep-all | break-word | initial | inherit |
| word-wrap | Digunakan untuk mengatur metode wraping pada teks | normal | break-word | initial | inherit |
| Color | Digunakan untuk memberikan warna pada teks | color | transparent | initial | inherit |
| Opacity | Digunakan untuk mengatur transparansi pada element | 0 - 1 | initial | inherit |
Properti css transform
Properti ini digunakan untuk melakukan transformasi pada sebuah element.
| Properti | Keterangan | Nilai |
| backface-visibility | Digunakan untuk menentukan apakah bagian belakang suatu elemen harus terlihat atau tidak saat menghadap pengguna. | visible | hidden | initial | inherit |
| perspective | Digunakan untuk memberikan elemen yang diposisikan 3D beberapa perspektif | length | none |
| perspective-origin | Digunakan untuk memberikan posisi asli pada elemen yang diposisikan 3D beberapa perspektif | x-axis y-axis | initial | inherit |
| transform | Digunakan untuk mentransformasi element secara singkat | none | transform-functions | initial | inherit |
| transform-origin | Digunakan untuk mengatur posisi asli pada element yang di transformasi | x-axis y-axis z-axis | initial | inherit |
| transform-style | Digunakan untuk menentukan bagaimana elemen bersarang dirender dalam ruang 3D. | flat | preserve-3d | initial | inherit |
Properti css transition
Properti ini digunakan untuk mengatur efek transisi pada element ketika terjadi perubahan pada sebuah nilai properti.
| Properti | Keterangan | Nilai |
| transition | Digunakan untuk mengatur tansisi secara singkat | property duration timing-function delay | initial | inherit |
| transition-delay | Digunakan untuk mengatur jeda pada transisi | time | initial | inherit |
| transition-duration | Digunakan untuk mengatur durasi pada transisi | time | initial | inherit |
| transition-property | Digunakan untuk mengatur pada properti apa transisi dilakukan | all | property name |
| transition-timing-function | Digunakan untuk menentukan gaya pada transisi | linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit |
Sekian dulu artikel pembahasan mengenai properti css kali ini.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
advertisement
Jika ada pertanyaan atau ada hal yang ingin di sampaikan silahkan tulis di kolom komentar.
Silahkan berkomentar dengan baik dan bijak!