Property Yang Digunakan Dalam CSS

CSS PROPERTIES

Seperti yang kita ketahui  CSS Merupakan kepanjangan dari Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.

Di bawah ini merupakan Property yang di gunakan dalam css1 sampai dengan css3

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