font Mendefinisikan berbagai properti font dalam satu deklarasi seperti font-style, font-varian, font-weight, font-size / line-height, dan font-family.
- font-family Menentukan daftar font untuk elemen.
- font-size Menentukan ukuran font untuk teks.
- font-size-Adjust Mempertahankan keterbacaan teks saat font fallback terjadi.
- font-stretch Memilih wajah normal, terkondensasi, atau diperluas dari font.
- font-style Mendefinisikan gaya font untuk teks.
- font-variant Menentukan varian font.
- font-weight Menentukan berat font teks.
Daftar Properti
- daftar-gaya Menentukan gaya tampilan untuk daftar dan elemen daftar.
- list-style-image Menentukan gambar yang akan digunakan sebagai penanda daftar-item.
- list-style-position Menentukan posisi marker daftar-item.
- list-style-type Menentukan gaya marker untuk daftar-item.
Properti Margin
- margin Mengatur margin pada keempat sisi elemen.
- margin-bottom Mengatur margin bawah elemen.
- margin-left Mengatur margin kiri elemen.
- margin-right Mengatur margin kanan elemen.
- margin-top Mengatur margin atas elemen.
Properti Tata Letak Multi-Kolom
kolom-count Menentukan jumlah kolom dalam elemen multi-kolom.
kolom-isi Menentukan bagaimana kolom akan diisi.
gap-kolom Menentukan celah antara kolom dalam elemen multi-kolom.
kolom-aturan Menentukan garis lurus, atau “aturan”, yang akan ditarik di antara setiap kolom dalam elemen multi-kolom.
kolom-aturan-warna Menentukan warna aturan yang ditarik di antara kolom dalam tata letak multi-kolom.
kolom-aturan-gaya Menentukan gaya aturan yang dibuat di antara kolom dalam tata letak multi-kolom.
- kolom-aturan-lebar Menentukan lebar aturan yang dibuat di antara kolom dalam tata letak multi-kolom.
- span-kolom Menentukan berapa banyak kolom yang direntang elemen dalam tata letak multi-kolom.
- lebar kolom Menentukan lebar optimal kolom dalam elemen multi-kolom.
- kolom Properti singkatan untuk mengatur lebar kolom dan properti penghitungan kolom.
- kolom-count Menentukan jumlah kolom dalam elemen multi-kolom.
Properti Garis Besar
- outline Mengatur lebar, gaya, dan warna untuk keempat sisi garis besar elemen.
- outline-color Mengatur warna garis besar.
- outline-offset Mengatur jarak antara garis besar dan tepi batas elemen.
- outline-style Mengatur gaya untuk outline.
- outline-width Mengatur lebar outline.
Properti Padding
- padding Mengatur padding pada keempat sisi elemen.
- padding-bottom Mengatur padding ke sisi bawah elemen.
- padding-left Mengatur padding ke sisi kiri elemen.
- padding-right Mengatur padding ke sisi kanan elemen.
- padding-top Mengatur padding ke sisi atas elemen.
Print Properties
page-break-after Menyisipkan page break setelah elemen.
page-break-before Menyisipkan page break sebelum elemen.
page-break-inside Menyisipkan page break di dalam suatu elemen.
Properti Tabel
- border-collapse Menentukan apakah perbatasan sel tabel terhubung atau dipisahkan.
- border-spacing Mengatur jarak antara batas sel tabel yang berdekatan.
- sisi keterangan Menentukan posisi keterangan tabel.
- sel kosong Menunjukkan atau menyembunyikan batas dan latar belakang sel tabel kosong.
- table-layout Menentukan algoritma tata letak tabel.
- border-collapse Menentukan apakah perbatasan sel tabel terhubung atau dipisahkan.
Properti Teks
- direction Menentukan arah teks / arah penulisan.
- tab-size Menentukan panjang karakter tab.
- text-align Menetapkan perataan horisontal konten inline.
- text-align-last Menentukan bagaimana baris terakhir dari sebuah blok atau sebuah baris tepat sebelum jeda baris paksa disejajarkan ketika text-align dibenarkan.
- text-decoration Menentukan dekorasi yang ditambahkan ke teks.
text-decoration-color Menentukan warna text-decoration-line.
text-decoration-line Menentukan jenis dekorasi garis apa yang ditambahkan ke elemen.
text-decoration-style Menentukan gaya garis yang ditentukan oleh properti teks-dekorasi-garis
text-indent Membuat indentasi pada baris pertama teks.
text-justify Menentukan metode justifikasi untuk digunakan ketika properti text-align diatur untuk dibenarkan.
- text-overflow Menentukan bagaimana konten teks akan ditampilkan, ketika meluap kontainer blok.
- text-shadow Menerapkan satu atau lebih bayangan ke konten teks suatu elemen.
- text-transform Mengubah kasus teks.
- line-height Mengatur tinggi antar baris teks.
- vertical-align Mengatur posisi vertikal suatu elemen relatif terhadap baseline teks saat ini.
- letter-spacing Mengatur jarak ekstra antar huruf.
word-spacing Mengatur jarak antar kata.
white-space Menentukan bagaimana ruang putih di dalam elemen ditangani.
word-break Menentukan cara memecah baris dalam kata-kata.
word-wrap Menentukan apakah akan memecah kata-kata ketika konten melampaui batas-batas wadahnya.
Ubah Properti
- visibilitas-muka-belakang Menentukan apakah sisi “belakang” elemen yang ditransformasikan terlihat saat menghadap pengguna.
- perspektif Menentukan perspektif dari mana semua elemen anak dari objek dilihat.
- perspektif-asal Menentukan asal (titik hilang untuk ruang 3D) untuk properti perspektif.
- transform Menerapkan transformasi 2D atau 3D ke elemen.
- transform-origin Menentukan asal-usul transformasi untuk suatu elemen.
- transform-style Menentukan bagaimana elemen bersarang ditampilkan dalam ruang 3D.
Properti Transisi
- Transisi Menentukan transisi antara dua keadaan elemen.
- transisi-delay Menentukan kapan efek transisi akan mulai.
- durasi transisi Menentukan jumlah detik atau milidetik yang harus diselesaikan oleh efek transisi.
- properti transisi Menentukan nama properti CSS yang akan menerapkan efek transisi.
- transisi-waktu-fungsi Menentukan kurva kecepatan efek transisi.
Properti Pemformatan Visual
- display Menentukan bagaimana elemen ditampilkan di layar.
- position Menentukan bagaimana suatu elemen diposisikan.
- top Menentukan lokasi tepi atas elemen yang diposisikan.
- right Menentukan lokasi tepi kanan elemen yang diposisikan.
- bawah Menentukan lokasi tepi bawah elemen yang diposisikan.
- kiri Menentukan lokasi tepi kiri elemen yang diposisikan.
float Menentukan apakah kotak harus mengapung atau tidak.
clear Menentukan penempatan elemen terkait dengan elemen mengambang.
z-index Menentukan urutan layering atau susun untuk elemen yang diposisikan.
overflow Menentukan perlakuan konten yang melebihi kotak elemen.
overflow-x Menentukan bagaimana mengelola konten ketika meluap lebar area konten elemen.
overflow-y Menentukan cara mengelola konten saat meluap dari ketinggian area konten elemen.
- resize Menentukan apakah suatu elemen dapat diubah ukurannya atau tidak oleh pengguna.
- clip Menentukan wilayah kliping.
- visibilitas Menentukan apakah suatu elemen terlihat atau tidak.
- kursor Menentukan jenis kursor.
- box-shadow Menerapkan satu atau lebih drop-shadows ke kotak elemen.
- box-sizing Mengubah model kotak CSS default.
Properti Animasi
animasi Menentukan perilaku semua animasi.
animation-delay Menentukan kapan animasi akan dimulai dengan penundaan.
arah-animasi Menentukan apakah animasi harus diputar maju, mundur, atau dalam siklus alternatif.
animasi-durasi Menentukan jumlah detik atau milidetik yang harus dilakukan animasi untuk menyelesaikan satu siklus.
- animation-fill-mode Menentukan bagaimana animasi CSS harus menerapkan gaya ke target sebelum dan sesudah dijalankan.
- animation-iteration-count Menentukan berapa kali siklus animasi harus dimainkan sebelum berhenti.
- animation-name Menentukan nama animasi yang ditentukan @keyframes yang harus diterapkan pada elemen yang dipilih.
- animation-play-state Menentukan apakah animasi sedang berjalan atau dihentikan sementara.
- animation-timing-function Menentukan bagaimana animasi CSS seharusnya berkembang selama durasi setiap siklus.
Melampaui Dasar-dasar CSS
Setelah Anda menguasai blok bangunan CSS, kami menyarankan untuk meningkatkan keterampilan CSS Anda dan mempelajari JavaScript untuk membawa halaman web Anda ke tingkat baru yang menakjubkan.