Pada tutorial kali ini, kita akan belajar tentang apa itu propeti.
Yu kita mulai tutorialnya,
Apa Itu Properti
Properti merupakan sebuah aturan yang di terapkan pada sebuah selector agar elemen html yang di seleksi oleh selector memiliki ciri dan sifat tertentu tergantung nilai yang diberikan.
Pada eksternal dan interna css, properti wajib ditulis didalam selector. Sedangkan pada inline css kita bisa langsung menulis properti beserta nilai yang diberikan.
Jenis-Jenis Properti
Berikut adalah properti-properti css yang sudah dikategorikan berdasarkan tipe dan fungsinya.
Animation
Digunakan untuk membuat dan mengatur animasi
| Properti | Keterangan | Nilai |
|---|---|---|
animation |
Digunakan untuk membuat animasi hanya secara instan | pindah 2s linear 0s infinite alternate; |
animation-delay |
Digunakan untuk menentukan jeda animasi | 5s (5 detik) |
animation-direction |
Digunakan untuk menentukan arah animasi | alternate | reverse |
animation-duration |
Digunakan untuk mengatur durasi animasi | 10s |
animation-fill-mode |
Digunakan untuk mengatur fill mode | none | forwards | backwards | both |
animation-iteration-count |
Digunakan untuk menentukan berapa kali animasi diputar | 10 | infinite |
animation-name |
Digunakan untuk memberi nama animasi yang kemudian digunakan pada rule @keyframe | nama animasi pada @keyframe |
animation-play-state |
Digunakan untuk mengatur state. | pause | running |
animation-timing-function |
Digunakan untuk mengatur animasi pada setiap framing selama durasi. | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
Background
Digunakan untuk mengatur latar belakang
| Properti | Keterangan | Nilai |
|---|---|---|
background |
Digunakan untuk mengatur latar belakang secara instan. | url("walpaper.png") no-repeat center, |
background-attachment |
Digunakan untuk mengatur tipe pelampiran latar belakang jika menggunakan gambar. Bisa discroll atau diam | Scroll | fixed |
background-clip |
Digunakan untuk mentukan tipe batas area background | border-box | padding-box | content-box |
background-color |
Digunakan untuk menentukan warna latar belakang | rgb | Hexa | nama warna dalam bhs.inggris |
background-image |
digunakan membuat latar belakang berupa gambar | url('lokasigambar/namgambar.jpg') |
background-origin |
Digunakan untuk menentukan pemposisian area latar belakang. | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
background-position |
Digunakan untuk menentukan posisi latar belakang | 70% | 520px | left | center | light | 25px left |
background-repeat |
Digunakan ketika menggunakan latar belakang berupa gambar. Apakah gambar di ulang ketika background lebih lebar | repeat | repeat-x | repeat-y | no-repeat |
background-size |
Digunakan untuk menentukan ukuran latar belakang | 250px | 50% | auto | cover | contain |
Border
Digunakan untuk membuat bingkai
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
border |
Digunakan untuk mengatur bingkai dari elemen. | 1px solid #eaeaea |
border-bottom |
Digunakan untuk mengatur bingkai bagian bawah. | 1px solid #eaeaea |
border-bottom-color |
Digunakan untuk mengatur warna bingkai. | #eaeaea |
border-bottom-left-radius |
Digunakan untuk mengatur pojok bingkai bagian bawah sisi kiri. | 9px |
border-bottom-right-radius |
Digunakan untuk mengatur pojok bingkai bagian bawah sisi kanan. | 9px |
border-bottom-style |
Digunakan untuk mengatur style bingkai bagian bawah. | dashed |
border-bottom-width |
Digunakan untuk mengatur lebar bingkai bagian bawah. | 10% |
border-color |
Digunakan untuk mengatur warna bingkai | red |
border-image |
Digunakan untuk mengatur bingkai dengan gambar | 250px | 50% | auto | cover | contain |
border-image-outset |
Digunakan untuk mengatur jarak outset | 10px |
border-image-repeat |
Digunakan untuk merepeat gambar di bingkai jika diperlukan | repeat | repeat-x | repeat-y | no-repeat |
border-image-slice |
digunakan untuk mengiris bingkai gambar | 30% |
border-image-source |
Digunakan untuk mengatur gambar bingkai | url('gambar.png') |
border-image-width |
Digunakan untuk mengatur lebar bingkai | 250px | 50% | auto | cover | contain |
border-left |
Digunakan untuk mengatur bingkai sisi kiri | 1px solid #eaeaea |
border-left-color |
Digunakan untuk mengatur warna bingkai sisi kiri | blue |
border-left-style |
Digunakan untuk mengatur style bingkai sisi kiri | dotted |
border-left-width |
Digunakan untuk mengatur lebar bingkai sisi kiri. | auto |
border-radius |
Digunakan untuk mengatur pojok bingkai sisi kiri | 9px |
border-right |
Digunakan untuk mengatur bingkai sisi kanan. | 1px solid #eaeaea |
border-right-color |
Digunakan untuk mengatur warna bingkai sisi kanan. | yellow |
border-right-style |
Digunakan untuk mengatur style bingkai sisi kanan. | solid |
border-right-width |
Digunakan untuk mengatur lebar bingkai sisi kanan. | auto |
border-style |
Digunakan untuk mengatur style bingkai. | dashed |
border-top |
Digunakan untuk mengatur bingkai bagian atas | 1px solid #eaeaea |
border-top-color |
Digunakan untuk mengatur warna bingkai bagian atas. | green |
border-top-left-radius |
Digunakan untuk mengatur pojok bingkai bagian atas sisi kiri. | 9px |
border-top-right-radius |
Digunakan untuk mengatur pojok bingkai bagian atas sisi kanan. | 9px |
border-top-style |
Digunakan untuk mengatur style bingkai bagian atas. | solid |
border-top-width |
Digunakan untuk mengatur lebar bingkai bagian atas. | 75% |
border-width |
Digunakan untuk mengatur lebar bingkai | 3px |
Column Layout
Digunakan untuk membuat multi kolom layout
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
columns |
Digunakan untuk mengatur kolom secara instan | 250px | auto | |
column-count |
Digunakan untuk menentukan jumlah kolom. | 250px | auto |
column-fill |
Digunakan untuk menentukan bagaimana column di terapkan | auto | balance |
column-gap |
Digunakan untuk menentukan celah kolom | 250 | normal |
column-rule |
Digunakan untuk menentukan garis yang akan dibuat | 250px solid blue |
column-rule-color |
Digunakan untuk mengatur warna garis | blue |
column-rule-style |
digunakan untuk menentukan style garis | dashed | dotted | double | solid | groove | inset | ridge | outset | none | hidden |
column-rule-width |
Digunakan untuk mengatur lebar garis | 250px |
column-span |
Digunakan untuk menggabungkan kolom | 4 |
column-width |
Digunakan untuk menentukan lebar kolom | 3 |
Content
Digunakan untuk menyisipkan sesuatu di elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
content |
Digunkan untuk menambahkan sesuatu pada elemen | teks atau kode simbol |
counter-increment |
digunakan untuk mebuat counter inkeremen | nama counter inkremen |
counter-reset |
Digunakan untuk mereset angka increment | nama counter inkremen |
quotes |
Digunakan untuk menambah tanda petik | "'" "'" |
Display
Digunakan untuk mengatur tampilan elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
display |
Digunakan untuk mengatur mode tampilan elemen | none | block | inline-block | inline |
position |
Digunakan untuk mengatur posisi elemen | static | fixed | absolute | relative | sticky |
top |
Digunakan untuk mengatur jarak bagian atas | 20px |
right |
Digunakan untuk mengatur jarak bagian kanan | 21px |
bottom |
Digunakan untuk mengatur jarak bagian bawah | 23px |
left |
Digunakan untuk mengatur jarak bagian kiri | 20px |
float |
Digunakan untuk mengatur posisi dengan mode mengapung | left | right | center | none |
clear |
Digunakan untuk mereset float elemen | left | none | right | both |
z-index |
Digunakan untuk mengatur indek layer elemen | 99 |
overflow |
Digunakan untuk menentukan mode ketika lebar atau tinggi elemen lebih besar dari parentnya | visible | scroll | auto | hidden |
overflow-x |
Digunakan untuk mengatur horizontal overflow | visible | scroll | auto | hidden |
overflow-y |
Digunakan untuk mengatur vertical overflow | visible | scroll | auto | hidden |
resize |
Digunakan untuk menentukan apakah elemen dapat diubah ukurannya | none | both | horizontal | vertical |
clip |
Digunakan untuk area kliping | auto | top, right, bottom, left |
visibility |
Digunakan untuk menentukan apakah elemen terlihat atau tersebunyi | visible | hidden | collapse |
cursor |
Digunakan untuk menentukan tipe cursor yang dipakai | tipe cursor |
box-shadow |
Diguanakan untuk mengatur bayangan elemen | none | blur | h-offset | v-offset | 20px 20px 10px grey | spred | inset |
box-sizing |
Digunakan untuk mengubah model box elemen. | content-box | border-box |
Flexible
Digunakan untuk mengatur fleksibilitas elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
align-content |
Digunakan untuk meluruskan konten di dalam elemen. | stretch | center | flex-start | flex-end | space-between | space-around |
align-items |
Digunakan untuk meluruskan item didalam elemen. | stretch | center| flex-start | flex-end | baseline |
align-self |
Diguanak untuk meluruskan elemen itu sendiri | stretch | center | flex-start | flex-end | baseline | auto |
flex |
Digunakan untuk mengatur lebar fleksibilitas komponen. | 1 |
flex-basis |
Digunakan untuk mengatur ukuran utaman dari fleksibel item. | 99px |
flex-direction |
Digunakan unutk menentukan arah dari fleksibel item. | row | column | row-reverse | column-reverse |
flex-flow |
Membuat instan fleksible properti | nilai dari flex-direction dan flex-wrap |
flex-grow |
Digunakan untuk menentukan bagaimana fleksibel item ketika meluas dari pebungkusnya | 10 |
flex-shrink |
Digunakan untuk menentukan bagaimana fleksibel item ketika menyusut. | 10 |
flex-wrap |
Digunakan untuk menentukan apakah fleksibel responsive atau tidak. | wrap | nowrap | wrap-reverse |
justify-content |
Digunakan untuk menentukan bagaimana item fleksibel disejajarkan. | center | flex-start | flex-end | space-between | space-around |
order |
Digunakan untuk mengurutkan | 1 | 2 | 3 | 4 |
Font
Digunakan untuk mengatur font yang digunakan
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
font |
Digunakan untuk mengatur font teks. | 14px|18em |
font-family |
Digunakan untuk mengatur tipe font. | jenis font |
font-size |
Digunakan untuk mengatur ukuran font | 14em |
font-size-adjust |
Digunakan ketika ukuran font dapat di dirubah. | angak | none |
font-stretch |
Digunakan untuk mengatur kerenggangan teks. | condensed | normal | expanded |
font-style |
Digunakan untuk mengatur style teks. | normal | italic | oblique |
font-variant |
Digunakan untuk mengatur variasi dari teks | normal | small-caps |
font-weight |
Digunakan untuk mengatur ketebalan teks. | normal | bold | border | lighter | 100 sampai 900 |
List
Digunakan untuk mengatur styling pada elemen list
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
list-style |
Digunakan untuk menentukan simbol yang digunakan secara instan. | disc inside |
list-style-image |
Digunakan untuk membuat simbol item menggunakan gambar. | url("images/arrow.png"); |
list-style-position |
Digunakan untuk menentukan posisi list. | inside | outside |
list-style-type |
Digunakan untuk menentukan simbol dari item item list. | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | |
Margin
Digunakan untuk membuat batas area luar elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
margin |
Digunakan untuk menatur jarak batas elemen. | 50px | 50% |
margin-bottom |
Digunakan untuk menatur jarak batas elemen bagian bawah. | 50px | 50% |
margin-left |
Digunakan untuk menatur jarak batas elemen bagian kiri. | 50px | 50% |
margin-right |
Digunakan untuk menatur jarak batas elemen bagian kanan. | 50px | 50% |
margin-top |
Digunakan untuk menatur jarak batas elemen bagian atas. | 50px | 50% |
Outline
Digunakan untuk membuat garis tepi elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
outline |
Digunakan untuk membuat garis tepi elemen secara instan. | 10px solid blue |
outline-color |
Digunakan untuk mengatur warna garis. | yellow |
outline-offset |
Digunakan unutk mengatur ruang antar garis tepi dengan border. | 20px |
outline-style |
Digunakan untuk mengatur style garis. | dashed | dotted | double | solid | groove | inset | ridge | outset | none | hidden |
outline-width |
Digunakan untuk mengatur lebar garis. | 100% |
Padding
Digunakan untuk membuat batas area elemen dengan kontennya
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
padding |
Digunakan untuk mengatur lebar lapisan elemen ke bagian dalam. | 50px | 50% |
padding-bottom |
Digunakan untuk mengatur lebar lapisan kebagian dalam bagian bawah elemen | 50px | 50% |
padding-left |
Digunakan untuk mengatur lebar lapisan kebagian dalam bagian kiri elemen | 50px | 50% |
padding-right |
Digunakan untuk mengatur lebar lapisan kebagian dalam bagian kanan elemen | 50px | 50% |
padding-top |
Digunakan untuk mengatur lebar lapisan kebagian dalam bagian atas elemen | 50px | 50% |
Digunakan untuk mengatur print view
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
page-break-after |
Digunakan untuk memasukan pagebreak setelah elemen. | always | auto | avoid | left | right |
page-break-before |
Digunakan untuk memasukan pagebreak sebelum elemen. | always | auto | avoid | left | right |
page-break-inside |
Digunakan untuk memasukan pagebreak didalam elemen. | always | auto | avoid | left | right |
Size
Digunakan untuk mengatur ukuran dan dimensi
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
height |
Digunakan untuk mengatur tinggi elemen | 50px | 50% |
max-height |
Digunakan untuk mengatur maksimal tinggi elemen | 100px | 50% |
max-width |
Digunakan utnuk mengatur maksimal lebar elemen. | 250px | 50% |
min-height |
Digunakan untuk mengatur minimal tinggi elemen | 520px | 50% |
min-width |
Digunakan untuk mengatur minimal lebar elemen | 520px | 50% |
width |
Digunakan untuk mengatur lebar elemen | 510px | 50% |
Table
Digunakan untuk membuat styling table
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
border-collapse |
Digunakan untuk menentukan apakah garis pembatas sel tabel terhubung atau dipisahkan. | separate | collapse |
border-spacing |
Digunakan untuk mengatur ruang antara sel yang berdekatan. | 5 |
caption-side |
Digunakan untuk mengatur posisi keterangan dari table. | top | bottom |
empty-cells |
Digunakan untuk menentukan apakah cell ditampilkan atau tidak ketika kosong. | show | hide |
table-layout |
Digunakan untuk membuat layout table secara instan | auto | fixed |
Text
Digunakan untuk mengatur format teks
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
direction |
Digunakan untuk menentukan arah teks. | ltr (left to right) | rtl (right to left) |
tab-size |
Digunakan untuk mengatur ukuran tab. | 17 |
text-align |
Digunakan untuk menentukan posisi teks. | auto | left | right | center | justify | start | end |
text-align-last |
Digunakan untuk menentukan posisi teks terakhir | auto | left | right | center | justify | start | end |
text-decoration |
Digunakan untuk mengatur dekorasi dari teks secara instan | underline dotted black |
text-decoration-color |
Digunakan untuk mengatur warna teks . | black |
text-decoration-line |
Digunakan untuk mengatur garis teks. | underline | overline | line-through |
text-decoration-style |
Digunakan untuk menentukan style yang digunakan | solid | double | dotted | wavy | dashed |
text-indent |
Indentasi baris pertama dari teks. | 10 | % |
text-justify |
Digunakan untuk menentukan kesejajaran dari teks. | auto | inter-word | inter-character | none |
text-overflow |
Digunakan untuk menentukan bagaimana jika teks meluap dari elemen. | clip | ellipsis |
text-shadow |
Digunakan untuk mengatur bayangan. | 2px 2px #ff0000; |
text-transform |
Digunakan untuk mentransformasi teks. | none | uppercase | lowercase | capitalize |
line-height |
Digunakan untuk mengatur tinggi dari teks. | noraml | angka | % |
vertical-align |
Digunakan untuk mengatur posisi dengan arah vertikal. | baseline | sub | super | top | text-top | middle | bottom | text-bottom |
letter-spacing |
Digunakan untuk mengatur jarak antara huruf | normal | 3px |
word-spacing |
Digunakan untuk mengatur jarak antara kata | normal | 3px |
white-space |
Digunakan untuk mengatur spasi. | normal | nowrap | pre | pre-line | pre-wrap |
word-break |
Digunakan untuk mengatur word break yang digunakan | normal | break-all | keep-all | break-word |
word-wrap |
Digunakan untuk menentukan responsive kata dari teks. | normal | break-word |
Color |
Digunakan untuk memberi warna pada teks elemen | rgb | Hexa | nama warna dalam bhs.inggris |
Opacity |
Digunakan untuk mengatur transparansi | 0 sampai 1 (contoh:0.75) |
Transform
Digunakan untuk melakukan transformasi pada elemen
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
backface-visibility |
Digunakan untuk menentukan apakah sisi "belakang" dari elemen yang diubah terlihat saat menghadap pengguna. | visible | hidden |
perspective |
Digunakan untuk menentukan perspektif dari mana semua elemen child dilihat. | 20(angka) | none |
perspective-origin |
Digunakan untuk mengatur perspective asli. | [left,center,right,length] |
transform |
Digunakan untuk merubah elemen. | rotate|matrix|translate|scale|screw|perpective |
transform-origin |
Digunakan untuk menentukan elemen asli sebelum transformasi. | 20% 40%; |
transform-style |
Digunakan untuk mengatur style transformasi. | flat | preserve-3d |
Transitions
Digunakan untuk mengatur transisi ketika elemen bertransformasi
| Properti | Keterangan | Contoh Nilai |
|---|---|---|
transition |
Digunakan untuk membuat transisi secara instan. | display 2s |
transition-delay |
Digunakan untuk menentukan jeda dari transisi. | 2s (2 detik) |
transition-duration |
Digunakan untuk menentukan durasi dari transisi. | 3s |
transition-property |
digunakan untuk mengatur transisi pada properti tertentu ketika berubah nilai. | nama properti css |
transition-timing-function |
Digunakan untuk mengatur efek dan kecepatan pada setiap frame selama durasi transisi. | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
Tenang aja kita tidak harus menghafal semuanya.
Hanya beberapa properti yang akan sering kita gunakan.
Dan kita akan bahas satu-satu di next tutorial
Sekian dulu artikel pengenalan properti css kali ini. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Jika ada pertanyaan atau ada hal yang ingin di sampaikan silahkan tulis di kolom komentar.
0 Komentar untuk " Tutorial belajar css # Apa itu properti css"
Silahkan berkomentar dengan baik dan bijak!