CSS Cheat Sheet

• font-family • width
Mengatur jenis font yang akan digunakan. Mengatur lebar suatu element.
• font-size Value: 5px, 5em, 50%, 5rem
Mengatur ukuran font. • height
Value: 5px, 5pt, 5%, 5em Mengatur tinggi suatu element.
• font-weight Value: 5px, 5em, 50%, 5rem
Mengatur ketebalan font • display
Value: lighter, normal, bold, bolder, 100-900 ……
• font-variant Value: none, inline, inline-block, block, flex
Mengubah font menjadi small caps • overflow
Value: normal, small-caps Untuk mengatur prilaku element yang keluar
• font-style dari parentnya.
Membuat huruf bercetak miring Value: visible, auto, hidden, scroll
Value: normal, italic, oblique • margin
Jarak antara suatu element dengan element
yang lain.
o margin-left
• text-align
Mengatur format paragraf atau text.
o margin-right
Value: left, right, center, justify o margin-top
• text-indent o margin-bottom
Memberi indentasi pada paragraf/text.
Value: <length>, auto
Value: 5px, 10%, 5em, 5rem
<length>: 5px, 5em, 5rem
• text-decoration
Mengatur dekorasi pada teks. • padding
Value: none, underline, overline, line-through Jarak antara suatu element dengan element
• text-transform yang ada di dalamnya.
mengubah jenis huruf menjadi huruf besar, kecil o padding-left
/ kapital.
o padding-right
Value: none, lowercase, uppercase, capitalize
o padding-top
• letter-spacing
Mengatur spasi antar huruf. o padding-bottom
Value: normal, 5px
Value: <length>, auto
• word-spacing <length>: 5px, 5em, 5rem
Mengatur spasi antar kata.
Value: normal, 5px • border
Batas / garis di sekeliling element.
Value: <tebal>, <style>, <warna>
<tebal>: 1px, 1em, 1rem
• background-color <style>: solid, dashed, dotted
Mengatur warna pada background. <warna>: black, #ab34f3, rgb(255, 10, 50), dan
Value: red, #fefefe, rgb(255, 0, 255), rgba(255, sebagainya.
0, 255, 0.5), hsl(83, 100%, 97%), hsla(120,
• float
100%, 50%, 0.3)
Untuk memaksa sebuah element untuk berada
• background-image di kanan / kiri dari parentnya / pembungkusnya.
Mengatur gambar yang akan digunakan pada Value: none, right, left
background.
• clear
Value: url(‘folder/gambar.jpg’)
Berfungsi untuk menghentikan / membersihkan
• background-repeat float.
Mengatur jenis pengulangan gambar pada Value: left, right, both
background.
• border-radius
Value: repeat-x, repeat-y, no-repeat, repeat
Untuk menumpulkan suatu element yang
• background-position berbentuk kotak.
Mengatur posisi gambar pada background. Value: 5px, 5%, 5em, 5rem
Value: top left, top center, center center, bottom
left, dan sebagainya.