DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Apa itu properti css

advertisement
Apa itu properti css
Sebelemunya kita sudah belajar cara membuat selector css untuk menyeleksi elemen yang ingin kita atur style-nya.
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.
Contoh properti css
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%

Print

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)

Masih ada properti lainnya yang mungkin terlewatkan untuk di bahas pada artikel ini.
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.
advertisement



0 Komentar untuk " Tutorial belajar css # Apa itu properti css"

Silahkan berkomentar dengan baik dan bijak!