Properti CSS dan fungsinya

       CSS Merupakan singkatan dari Cascade Style Sheet, CSS digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web, mulai dari memformat text, sampai pada memformat layout. Adapun tujuan utama dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu, meperindah, dan mempercantik tampilan. Ada beberapa properti CSS yang harus dimiliki para designer,

Berikut properti CSS :

Animation Properties
@keyframes	Menentukan animasi
animation-name	Menentukan nama untuk animasi keyframes @
animation-duration	Menentukan berapa detik atau milidetik animasi diperlukan untuk menyelesaikan satu siklus
animation-timing-function	Menentukan kurva kecepatan animasi
animation-delay	Menentukan kapan animasi akan mulai
animation-iteration-count	Menentukan jumlah kali animasi harus dimainkan
animation-direction	Menentukan apakah atau tidak animasi harus bermain secara terbalik pada siklus alternative
animation-play-state	Menentukan apakah animasi sedang berjalan atau dijeda
Background Properties
Background	Mengatur semua properti latar belakang dalam satu deklarasi
background-attachment	Mengatur apakah gambar latar belakang tetap atau gulungan dengan sisa halaman
Backround-color	Mengatur warna latar belakang dari elemen
background-image	Mengatur gambar latar belakang untuk elemen
background-position	Mengatur posisi awal dari gambar latar belakang
background-repeat	Mengatur bagaimana gambar latar belakang akan diulangi
background-clip	Menentukan daerah lukisan latar belakang
background-origin	Menentukan daerah posisi gambar latar belakang
background-size	Menentukan ukuran gambar latar belakang
Border and Outline Properties
border	Mengatur semua properti perbatasan dalam satu deklarasi
border-bottom	Mengatur semua properti perbatasan bawah dalam satu deklarasi
border-bottom-color	Mengatur warna batas bawah
border-bottom-style	Mengatur gaya perbatasan bawah
border-bottom-width	Mengatur lebar perbatasan bawah
border-color	Mengatur warna batas
border-left	Mengatur semua properti perbatasan kiri dalam satu deklarasi
border-left-color	Mengatur warna batas kiri
border-left-style	Mengatur gaya perbatasan kiri
border-left-width	Mengatur lebar batas kiri
border-right	Mengatur semua properti perbatasan kanan dalam satu deklarasi
border-right-color	Mengatur warna batas kanan
border-right-style	Mengatur gaya perbatasan kanan
border-right-width	Mengatur lebar batas kanan
border-style	Mengatur gaya dari empat perbatasan
border-top	Mengatur semua properti perbatasan atas dalam satu deklarasi
border-top-color	Mengatur warna batas Atas
border-top-style	Mengatur gaya perbatasan Atas
border-top-width	Mengatur lebar batas Atas
border-width	Mengatur lebar dari empat perbatasan
outline	Mengatur semua properti outline dalam satu deklarasi
outline-color	Mengatur warna garis besar
outline-style	Mengatur gaya garis besar
outline-width	Mengatur lebar garis besar
border-bottom-left-radius	Mendefinisikan bentuk perbatasan sudut kiri bawah
border-bottom-right-radius	Mendefinisikan bentuk perbatasan sudut kanan bawah
border-image	Properti singkatan untuk menetapkan semua perbatasan-image
border-image-outset	Menentukan jumlah dimana bidang gambar perbatasan melampaui kotak perbatasan
border-image-repeat	Menentukan apakah gambar-perbatasan harus diulang, bulat atau diregangkan
border-image-slice	Menentukan offset batin dari perbatasan gambar
border-image-source	Menentukan gambar yang akan digunakan sebagai perbatasan
border-image-width	Menentukan lebar perbatasan gambar
border-radius	Properti singkatan untuk menetapkan semua empat perbatasan-*-radius properti
border-top-left-radius	Mendefinisikan bentuk perbatasan pojok kiri
border-top-right-radius	Mendefinisikan bentuk perbatasan sudut kanan atas
box-shadow	Atase satu atau lebih drop-bayangan ke kotak
Box Properties
overflow-x	Menentukan apakah atau tidak untuk klip kiri / kanan tepi konten, jika meluap area konten elemen
overflow-y	Menentukan apakah atau tidak untuk klip bagian atas / bawah tepi konten, jika meluap area konten elemen
overflow-style	Menentukan metode bergulir disukai untuk elemen yang melimpah
rotation	Memutar elemen di sekitar titik yang diberikan ditentukan oleh properti rotasi-titik
rotation-point	Mendefinisikan titik sebagai offset dari tepi perbatasan kiri atas
Color Properties
color-profile	Memungkinkan spesifikasi dari profil warna sumber lain selain default
opacity	Menentukan tingkat opacity untuk elemen
rendering-intent	Memungkinkan spesifikasi maksud warna profil render selain default
Content for Paged Media Properties
bookmark-label	Menentukan label bookmark
bookmark-level	Menentukan tingkat bookmark
bookmark-target	Menentukan target dari link bookmark
float-offset	Dorong elemen melayang ke arah berlawanan dari mana mereka telah melayang dengan float
hyphenate-after	Menentukan jumlah minimum karakter dalam kata ditulis dgn tanda penghubung setelah karakter hyphenation
hyphenate-before	Menentukan jumlah minimum karakter dalam kata ditulis dgn tanda penghubung sebelum karakter hyphenation
hyphenate-character	Menentukan string yang akan ditampilkan ketika hyphenate-break terjadi
hyphenate-lines	Menunjukkan jumlah maksimum baris ditulis dgn tanda penghubung berturut-turut dalam suatu elemen
hyphenate-resource	Menentukan suatu daftar comma-separated sumber daya eksternal yang dapat membantu browser menentukan titik hyphenation
hyphens	Mengatur cara untuk membagi kata-kata untuk meningkatkan tata letak paragraf
image-resolution	Menentukan resolusi gambar yang benar
marks	Menambahkan tanaman dan / atau tanda silang pada dokumen
string-set
Dimension Properties
height	Mengatur ketinggian elemen
max-height	Mengatur ketinggian maksimum elemen
max-width	Mengatur lebar maksimum elemen
min-height	Mengatur ketinggian minimal elemen
min-width	Mengatur lebar minimum elemen
width	Mengatur lebar elemen
Flexible Box Properties
box-align	Menentukan bagaimana untuk menyelaraskan elemen anak dari kotak
box-direction	Menentukan arah mana anak-anak kotak ditampilkan
box-flex	Menentukan apakah anak-anak kotak fleksibel atau tidak fleksibel dalam ukuran
box-flex-group	Memberikan elemen fleksibel untuk melenturkan kelompok
box-lines	Menentukan apakah kolom akan pergi ke baris baru setiap kali kehabisan ruang di kotak orangtua
box-ordinal-group	Menentukan urutan tampilan elemen anak dari kotak
box-orient	Menentukan apakah anak-anak dari kotak harus ditata horizontal atau vertikal
box-pack	Menentukan posisi horizontal dalam kotak horisontal dan posisi vertikal dalam kotak vertikal
Font Properties
font	Mengatur semua properti font dalam satu deklarasi
font-family	Menentukan Tampilan font untuk teks
font-size	Menentukan ukuran font teks
font-style	Menentukan gaya font untuk teks
font-variant	Menentukan apakah atau tidak teks harus ditampilkan dalam huruf kecil.
font-weight	Menentukan berat font
@font-face	Sebuah aturan yang memungkinkan situs web untuk men-download dan menggunakan font selain "web-aman" font
font-size-adjust	Mempertahankan pembacaan teks saat fallback font yang terjadi
font-stretch	Memilih wajah, normal kental, atau diperluas dari keluarga font
Generated Content Properties
content	Digunakan dengan: sebelum dan: setelah pseudo-elemen, untuk memasukkan konten yang dihasilkan
counter-increment	Penambahan satu atau lebih counter
counter-reset	Menciptakan atau mengatur ulang satu atau lebih counter
quotes	Mengatur jenis tanda kutip untuk kutipan tertanam
crop	Memungkinkan elemen diganti menjadi hanya area persegi obyek, bukan seluruh objek
move-to	Penyebab elemen yang akan dihapus dari aliran dan dimasukkan kembali pada titik kemudian dalam dokumen
page-policy	Menentukan halaman yang berbasis terjadinya suatu unsur tertentu diterapkan ke counter atau nilai string
Grid Properties
grid-columns	Menentukan lebar setiap kolom dalam kotak
grid-rows	Menentukan tinggi setiap kolom dalam kotak
Hyperlink Properties
target	Properti singkatan untuk menetapkan target-nama, target-baru, dan target-posisi properti
target-name	Menentukan di mana untuk membuka link (target tujuan)
target-new	Menentukan apakah link tujuan baru harus terbuka di jendela baru atau di tab baru dari jendela yang ada
target-position	Menentukan di mana link tujuan baru harus ditempatkan
Linebox Properties
alignment-adjust	Memungkinkan penyelarasan lebih tepat dari unsur-unsur
alignment-baseline	Menentukan bagaimana elemen inline-tingkat sejalan sehubungan dengan induknya
baseline-shift	Memungkinkan reposisi relatif dominan-awal sampai dominan-dasar
dominant-baseline	Menentukan-dasar skala-tabel
drop-initial-after-adjust	Mengatur titik alignment drop awal untuk titik koneksi utama
drop-initial-after-align	Set yang keselarasan baris dalam kotak garis awal digunakan pada titik sambungan primer dengan kotak huruf awal
drop-initial-before-adjust	Mengatur titik alignment drop awal untuk titik sambungan sekunder
drop-initial-before-align	Set yang keselarasan baris dalam kotak garis awal digunakan pada titik sambungan sekunder dengan kotak surat awal
drop-initial-size	Mengontrol tenggelamnya sebagian dari huruf awal
drop-initial-value	Mengaktifkan efek drop-awal
inline-box-align	Set yang garis blok inline multi-line sejajar dengan elemen inline sebelumnya dan berikutnya dalam garis
line-stacking	Properti singkatan untuk menetapkan garis-susun-strategi, garis-susun-ruby, dan garis-susun-pergeseran sifat
line-stacking-ruby	Mengatur metode garis susun untuk elemen blok yang mengandung unsur-unsur penjelasan ruby
line-stacking-shift	Mengatur metode garis susun untuk elemen blok yang mengandung unsur-unsur dengan dasar-pergeseran
line-stacking-strategy	Mengatur strategi garis susun untuk kotak garis ditumpuk dalam elemen blok yang mengandung
text-height	Set dimensi blok-perkembangan area konten teks sebuah kotak inline
List Properties
list-style	Mengatur semua properti untuk daftar dalam satu deklarasi
list-style-image	Menentukan gambar sebagai penanda daftar-item
list-style-position	Menentukan jika daftar-item penanda akan muncul dalam atau di luar aliran konten
list-style-type	Menentukan jenis daftar-item penanda
Margin Properties
margin	Ukuran jarak bagian luar atau ukuran jarak sesudah Border
margin-bottom	Mengatur ukuran jarak bagian bawah
margin-left	Mengatur ukuran jarak bagian kiri
margin-right	Mengatur ukuran jarak bagian kanan
margin-top	Mengatur ukuran jarak bagian Atas
Marquee Properties
marquee-direction	Mengatur arah konten bergerak
marquee-play-count	Set berapa kali bergerak konten
marquee-speed	Mengatur seberapa cepat gulungan konten
marquee-style	Mengatur gaya konten bergerak
Multi-column Properties
column-count	Menentukan jumlah kolom elemen harus dibagi menjadi
column-fill	Menentukan bagaimana mengisi kolom
column-gap	Menentukan kesenjangan antara kolom
column-rule	Sebuah properti singkat untuk pengaturan semua kolom-aturan-sifat *
column-rule-color	Menentukan warna aturan antara kolom
column-rule-style	Menentukan gaya aturan antara kolom
column-rule-width	Menentukan lebar aturan antara kolom
column-span	Menentukan berapa banyak kolom elemen harus mencakup seluruh
column-width	Menentukan lebar kolom
columns	Properti singkatan untuk menetapkan kolom-lebar dan kolom-count
Padding Properties
padding	Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
padding-bottom	Mengatur ukuran jarak bagian bawah
padding-left	Mengatur ukuran jarak bagian kiri
padding-right	Mengatur ukuran jarak bagian kanan
padding-top	Mengatur ukuran jarak bagian Atas
Paged Media Properties
fit	Memberikan petunjuk untuk bagaimana skala elemen diganti jika tidak lebar maupun properti puncaknya adalah auto
fit-position	Menentukan penyelarasan obyek dalam kotak
image-orientation	Menentukan rotasi ke arah kanan atau searah jarum jam bahwa agen pengguna berlaku untuk gambar
page	Menentukan jenis tertentu dari halaman di mana elemen HARUS ditampilkan
size	Menentukan ukuran dan orientasi dari kotak yang berisi untuk konten halaman
Positioning Properties
bottom	Menentukan posisi bawah elemen diposisikan
clear	Menentukan mana sisi elemen mana elemen mengambang lainnya tidak diperbolehkan
clip	Klip elemen benar-benar diposisikan
cursor	Menentukan jenis kursor yang akan ditampilkan
display	Menentukan bagaimana elemen HTML tertentu harus ditampilkan
float	Menentukan apakah atau tidak kotak harus mengapung
left	Menentukan posisi kiri elemen diposisikan
overflow	Menentukan apa yang terjadi jika konten meluap kotak elemen ini
position	Menentukan jenis metode penentuan posisi yang digunakan untuk sebuah elemen (statis, relatif, absolut atau tetap)
right	Menentukan posisi yang tepat dari elemen diposisikan
top	Menentukan posisi teratas dari elemen diposisikan
visibility	Menentukan apakah elemen terlihat
z-index	Mengatur urutan tumpukan elemen diposisikan
Print Properties
orphans	Mengatur jumlah minimum baris yang harus ditinggalkan di bagian bawah halaman saat istirahat halaman terjadi di dalam elemen
page-break-after	Mengatur perilaku halaman pemecah setelah elemen
page-break-before	Mengatur perilaku halaman-breaking sebelum elemen
page-break-inside	Mengatur perilaku halaman-breaking di dalam elemen
widows	Mengatur perilaku halaman-breaking di dalam elemen
Ruby Properties
ruby-align	Mengontrol perataan teks dari teks ruby dan isi basis ruby relatif terhadap satu sama lain
ruby-overhang	Menentukan apakah, dan di sisi mana, ruby teks diperbolehkan untuk sebagian overhang teks yang berdekatan di samping basis sendiri, ketika teks ruby lebih lebar dari dasar ruby
ruby-position	Mengontrol posisi teks ruby sehubungan dengan alasnya
ruby-span	Mengontrol perilaku mencakup elemen anotasi
Speech Properties
mark	Properti singkatan untuk menetapkan tanda-tanda sebelum dan setelah sifat-
mark-after	Memungkinkan spidol nama harus terpasang ke stream audio
mark-before	Memungkinkan spidol nama harus terpasang ke stream audio
phonemes	Menentukan pengucapan fonetik untuk teks yang dikandung oleh elemen terkait
rest	Properti singkatan untuk menetapkan sisa-sisa sebelum dan setelah sifat-
rest-after	Menentukan istirahat atau batas prosodi untuk diamati setelah berbicara konten sebuah elemen
rest-before	Menentukan istirahat atau batas prosodi untuk diamati sebelum berbicara konten sebuah elemen
voice-balance	Menentukan keseimbangan antara saluran kiri dan kanan
voice-duration	Menentukan berapa lama harus dilakukan untuk membuat konten elemen yang dipilih
voice-pitch	Menentukan lapangan rata-rata (frekuensi) dari suara yang berbicara
voice-pitch-range	Menentukan variasi dalam lapangan rata-rata
voice-rate	Mengontrol kecepatan berbicara
voice-stress	Menunjukkan kekuatan penekanan yang akan diterapkan
voice-volume	Mengacu pada amplitudo gelombang output oleh synthesises pidato
Table Properties
border-collapse	Menentukan apakah atau tidak perbatasan tabel harus runtuh
border-spacing	Menentukan jarak antara batas sel yang berdekatan
caption-side	Menentukan penempatan keterangan tabel
empty-cells	Menentukan apakah atau tidak untuk menampilkan perbatasan dan latar belakang pada sel kosong dalam tabel
table-layout	Mengatur tata letak algoritma yang akan digunakan untuk tabel
Text Properties
color	Mengatur warna teks
direction	Menentukan arah teks / tulisan arah
letter-spacing	Meningkat atau menurun ruang antara karakter pada teks
line-height	Mengatur tinggi baris
text-align	Menentukan alignment horizontal teks
text-decoration	Menentukan dekorasi ditambahkan ke teks
text-indent	Menentukan indentasi dari baris pertama dalam blok teks-
text-transform	Mengontrol kapitalisasi teks
unicode-bidi
vertical-align	Mengatur alignment vertikal dari elemen
white-space	Menentukan bagaimana putih-ruang di dalam elemen ditangani
word-spacing	Meningkat atau menurun ruang antara kata-kata dalam teks
hanging-punctuation	Menentukan apakah karakter tanda baca dapat ditempatkan di luar kotak garis
punctuation-trim	Menentukan apakah karakter tanda baca harus dipangkas
text-align-last	Menjelaskan bagaimana baris terakhir blok atau baris tepat sebelum istirahat garis paksa sejajar ketika text-align adalah "membenarkan"
text-justify	Menentukan metode pembenaran digunakan ketika text-align adalah "membenarkan"
text-outline	Menentukan garis teks
text-overflow	Menentukan apa yang harus terjadi ketika teks melimpahi mengandung unsur
text-shadow	Menambahkan bayangan untuk teks
text-wrap	Menentukan aturan melanggar garis untuk teks
word-break	Menentukan aturan baris melanggar untuk non-CJK script
word-wrap	Memungkinkan panjang, kata-kata bisa dipecahkan untuk dilanggar dan bungkus ke baris berikutnya
2D/3D Transform Properties
transform	Menerapkan transformasi 2D atau 3D untuk elemen
transform-origin	Memungkinkan Anda untuk mengubah posisi pada elemen berubah
transform-style	Menentukan bagaimana bersarang elemen tersebut diberikan di ruang 3D
perspective	Menentukan perspektif tentang bagaimana unsur-unsur 3D dipandang
perspective-origin	Menentukan posisi bawah elemen 3D
backface-visibility	Tetapkan apakah atau tidak sebuah elemen akan terlihat bila tidak menghadap layar
Transition Properties
transition	Properti singkatan untuk menetapkan sifat transisi empat
transition-property	Menentukan nama properti CSS efek transisi untuk
transition-duration	Menentukan berapa detik atau milidetik efek transisi diperlukan untuk menyelesaikan
transition-timing-function	Menentukan kurva kecepatan efek transisi
transition-delay	Menentukan kapan efek transisi akan mulai
User-interface Properties
appearance	Memungkinkan Anda untuk membuat tampilan elemen seperti elemen antarmuka pengguna standar
box-sizing	Memungkinkan Anda untuk menentukan unsur-unsur tertentu untuk menyesuaikan suatu daerah dengan cara tertentu
icon	Menyediakan penulis kemampuan untuk gaya elemen setara dengan ikon
nav-down	Menentukan mana untuk menavigasi ketika menggunakan tombol panah-bawah navigasi
nav-index	Menentukan urutan tabbing untuk elemen
nav-left	Menentukan mana untuk menavigasi ketika menggunakan tombol panah kiri navigasi
nav-right	Menentukan mana untuk menavigasi ketika menggunakan panah kanan tombol navigasi
nav-up	Menentukan mana untuk menavigasi ketika menggunakan panah-up tombol navigasi
outline-offset	Offset garis besar, dan menarik itu di luar tepi perbatasan
resize	Menentukan apakah suatu unsur adalah resizable oleh pengguna