Daftar Lengkap CSS Properties

Q: Apa perbedaan antara padding dan margin CSS?

Padding adalah ruang antara konten dan border elemen. Ruang ini berada di dalam elemen. Margin adalah ruang di luar border, yang menciptakan jarak antara elemen dan elemen di sekitarnya. Margin berada di luar elemen.

Q: Apa fungsi properti box-sizing?

Properti box-sizing menentukan cara menghitung lebar dan tinggi elemen. Secara default, box-sizing diatur ke content-box, yang berarti padding dan border tidak disertakan dalam lebar atau tinggi elemen. Mengaturnya ke border-box menyertakan padding dan border dalam lebar dan tinggi, sehingga mencegah masalah tata letak.

Q: Apa perbedaan position: relative dan position: absolute?

position: relative memposisikan elemen relatif terhadap posisi normalnya. Elemen tetap berada dalam alur dokumen, tetapi Anda dapat mengimbanginya menggunakan top, right, bottom, atau left. position: absolute menghapus elemen dari alur dokumen dan memposisikannya relatif terhadap leluhur terdekatnya (elemen dengan position selain static), atau blok awal yang memuatnya jika tidak ada leluhur tersebut.

Q: Apa tujuan dari properti z-index?

Properti z-index mengontrol urutan penumpukan elemen di sepanjang sumbu z (yang mewakili kedalaman). Elemen dengan nilai z-index yang lebih tinggi ditumpuk di atas elemen dengan z-index yang lebih rendah. Properti ini hanya berfungsi pada elemen dengan nilai position selain static.

Q: Apa perbedaan antara display: none dan visibility: hidden?

display: none menghapus elemen sepenuhnya dari alur dokumen. Elemen tersebut tidak memakan ruang apa pun di halaman. visibility: hidden menyembunyikan elemen tetapi tetap menyisakan ruang di tata letak. Elemen tersebut tetap berada di alur dokumen tetapi tidak terlihat.

Q: Apa tujuan properti transition di CSS?

Properti transition memungkinkan Anda membuat animasi yang halus di antara perubahan properti. Anda dapat menentukan properti mana yang akan dianimasikan, durasi animasi, fungsi pengaturan waktu, dan penundaan apa pun. Misalnya, transition: all 0.3s ease akan menganimasikan semua perubahan properti selama 0,3 detik menggunakan fungsi pengaturan waktu ease-in-out.

Q: Apa fungsi properti float, dan kapan saya harus menggunakannya?

Properti float digunakan untuk memindahkan elemen ke kiri atau kanan, yang memungkinkan konten lain untuk membungkusnya. Properti ini umumnya digunakan untuk tata letak sebelum Flexbox dan grid menjadi populer. Saat ini, properti ini terutama digunakan untuk membungkus teks di sekitar gambar. Hindari penggunaan float untuk tata letak yang rumit; sebagai gantinya, gunakan flexbox atau grid.

Q: Bagaimana cara memusatkan elemen secara horizontal dan vertikal dalam CSS?

Ada beberapa cara untuk memusatkan elemen: Flexbox : Gunakan display: flex, lalu justify-content: center untuk pemusatan horizontal dan align-items: center untuk pemusatan vertikal. Grid : Gunakan display: grid, lalu place-items: center untuk memusatkan baik secara horizontal maupun vertikal. Untuk elemen sebaris, Anda dapat menggunakan text-align: center untuk pemusatan horizontal di dalam wadah blok.

Q: Apa perbedaan antara elemen inline, block, dan inline-block?

inline elements tidak dimulai pada baris baru dan hanya mengambil lebar sebanyak yang diperlukan (misalnya, <span>, <a>). block elements selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (misalnya, <div>, <p>). inline-block elements berperilaku seperti elemen inline tetapi memungkinkan Anda mengatur lebar, tinggi, dan margin, seperti elemen block.

TokoDaring.Com – Daftar Lengkap CSS Properties. Berikut adalah daftar lengkap CSS properties yang dikelompokkan berdasarkan kategori untuk pemahaman yang lebih baik. Daftar ini mewakili properti CSS yang paling umum digunakan, tetapi bahasanya terus berkembang, dan properti baru ditambahkan seiring waktu.

Artikel Seri Programming Lainnya: Belajar Javascript.

CSS adalah singkatan dari Cascading Style Sheets, bahasa pemrograman yang digunakan untuk memberi gaya dan menyusun halaman web. CSS adalah teknologi utama World Wide Web, bersama dengan HTML dan JavaScript.

1. Box Model Properties

CSS Box Model Property adalah model tata letak yang menjelaskan bagaimana berbagai komponen elemen web (konten, padding, border, dan margin) disusun dan diposisikan. Setiap elemen web menghasilkan kotak persegi panjang yang mencakup komponen-komponen ini, dan Model Kotak memungkinkan pengembang untuk mengontrol ukuran dan spasi elemen secara efektif.

Lebih lanjut tentang CSS Box Model Property, dan berikut adalah list property CSS dalam cakupan property box model CSS.

width, Properti CSS width mengatur lebar elemen. Secara default, properti ini mengatur lebar area konten, tetapi jika box-sizing diatur ke border-box, properti ini mengatur lebar area border. Artikel tentang properti CSS width.
height, Properti CSS height menentukan tinggi suatu elemen. Secara default, properti ini menentukan tinggi area konten. Namun, jika box-sizing diatur ke border-box, maka properti ini akan menentukan tinggi area border. Artikel tentang properti CSS height.
margin, Properti margin CSS digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan. Dengan CSS, Anda memiliki kendali penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri). Artikel tentang property CSS margin CSS.
margin-top, Properti CSS margin-top mengatur area margin di bagian atas elemen. Nilai positif menempatkannya lebih jauh dari tetangganya, sedangkan nilai negatif menempatkannya lebih dekat. Artikel tentang property CSS margin-top.
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-style
border-color
border-top
border-right
border-bottom
border-left
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
box-sizing
display
overflow
overflow-x
overflow-y
outline
outline-width
outline-style
outline-color
outline-offset
visibility

2. Background Properties

background
background-color
background-image
background-position
background-size
background-repeat
background-attachment
background-clip
background-origin

3. Typography Properties

color
font
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
letter-spacing
word-spacing
line-height
text-align
text-decoration
text-transform
text-indent
text-shadow
vertical-align
direction
unicode-bidi
white-space
writing-mode

4. Layout & Positioning Properties

position
top
right
bottom
left
z-index
float
clear
box-shadow
box-decoration-break
display
flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-self
align-content
order
grid
grid-template
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid-area
grid-row
grid-column
grid-row-start
grid-row-end
grid-column-start
grid-column-end
gap
row-gap
column-gap
align-content

5. List Properties

list-style
list-style-type
list-style-position
list-style-image

6. Animation & Transition Properties

animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
transition
transition-property
transition-duration
transition-timing-function
transition-delay

7. Transform Properties

transform
transform-origin
transform-style
perspective
perspective-origin
backface-visibility

8. Flexbox Properties

display: flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-self
align-content
order
flex
flex-grow
flex-shrink
flex-basis

9. Grid Properties

display: grid
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid-area
grid-row
grid-row-start
grid-row-end
grid-column
grid-column-start
grid-column-end
gap
row-gap
column-gap

10. Alignment Properties

justify-items
justify-self
align-items
align-self
place-items
place-self

11. Border and Outline Properties

border-collapse
border-spacing
caption-side
empty-cells
table-layout

12. Table Layout Properties

border-collapse
border-spacing
caption-side
empty-cells
table-layout

13. Column Properties

columns
column-width
column-count
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
column-span
column-fill

14. Content and Quotation Properties

content
quotes
counter-reset
counter-increment

15. Filter Properties

filter
backdrop-filter

16. Miscellaneous Properties

cursor
opacity
visibility
clip
clip-path
resize
user-select
pointer-events

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Daftar Lengkap CSS Properties

Berikut adalah 10 FAQ informasional tentang Daftar Lengkap CSS Properties, yang mencakup konsep penting dan pertanyaan umum. FAQ ini mencakup ide-ide utama dan pertanyaan umum mengenai properti CSS dan teknik tata letak.

Apa perbedaan antara `padding` dan `margin` CSS?

Padding adalah ruang antara konten dan border elemen. Ruang ini berada di dalam elemen.
Margin adalah ruang di luar border, yang menciptakan jarak antara elemen dan elemen di sekitarnya. Margin berada di luar elemen.

Apa fungsi properti `box-sizing`?

Properti box-sizing menentukan cara menghitung lebar dan tinggi elemen. Secara default, box-sizing diatur ke content-box, yang berarti padding dan border tidak disertakan dalam lebar atau tinggi elemen. Mengaturnya ke border-box menyertakan padding dan border dalam lebar dan tinggi, sehingga mencegah masalah tata letak.

Apa perbedaan `position: relative` dan `position: absolute`?

position: relative memposisikan elemen relatif terhadap posisi normalnya. Elemen tetap berada dalam alur dokumen, tetapi Anda dapat mengimbanginya menggunakan top, right, bottom, atau left.
position: absolute menghapus elemen dari alur dokumen dan memposisikannya relatif terhadap leluhur terdekatnya (elemen dengan position selain static), atau blok awal yang memuatnya jika tidak ada leluhur tersebut.

Apa tujuan dari properti `z-index`?

Properti z-index mengontrol urutan penumpukan elemen di sepanjang sumbu z (yang mewakili kedalaman). Elemen dengan nilai z-index yang lebih tinggi ditumpuk di atas elemen dengan z-index yang lebih rendah. Properti ini hanya berfungsi pada elemen dengan nilai position selain static.

Bagaimana cara membuat tata letak responsif menggunakan properti CSS?

Anda dapat membuat tata letak responsif menggunakan properti CSS seperti:
Media queries @media) untuk menerapkan gaya yang berbeda untuk ukuran layar yang berbeda.
Flexbox (display: flex) untuk mendistribusikan ruang dan menyelaraskan item dengan mudah dalam wadah yang fleksibel.
Grid layout (display: grid) untuk tata letak berbasis grid yang lebih kompleks.
Relative units seperti %, vw, dan vh untuk menentukan ukuran elemen berdasarkan viewport.

Apa perbedaan antara `display: none` dan `visibility: hidden`?

display: none menghapus elemen sepenuhnya dari alur dokumen. Elemen tersebut tidak memakan ruang apa pun di halaman.
visibility: hidden menyembunyikan elemen tetapi tetap menyisakan ruang di tata letak. Elemen tersebut tetap berada di alur dokumen tetapi tidak terlihat.

Apa tujuan properti `transition` di CSS?

Properti transition memungkinkan Anda membuat animasi yang halus di antara perubahan properti. Anda dapat menentukan properti mana yang akan dianimasikan, durasi animasi, fungsi pengaturan waktu, dan penundaan apa pun. Misalnya, transition: all 0.3s ease akan menganimasikan semua perubahan properti selama 0,3 detik menggunakan fungsi pengaturan waktu ease-in-out.

Apa fungsi properti `float`, dan kapan saya harus menggunakannya?

Properti float digunakan untuk memindahkan elemen ke kiri atau kanan, yang memungkinkan konten lain untuk membungkusnya. Properti ini umumnya digunakan untuk tata letak sebelum Flexbox dan grid menjadi populer. Saat ini, properti ini terutama digunakan untuk membungkus teks di sekitar gambar. Hindari penggunaan float untuk tata letak yang rumit; sebagai gantinya, gunakan flexbox atau grid.

Bagaimana cara memusatkan elemen secara horizontal dan vertikal dalam CSS?

Ada beberapa cara untuk memusatkan elemen:
Flexbox: Gunakan display: flex, lalu justify-content: center untuk pemusatan horizontal dan align-items: center untuk pemusatan vertikal.
Grid: Gunakan display: grid, lalu place-items: center untuk memusatkan baik secara horizontal maupun vertikal.
Untuk elemen sebaris, Anda dapat menggunakan text-align: center untuk pemusatan horizontal di dalam wadah blok.

Apa perbedaan antara elemen `inline`, `block`, dan `inline-block`?

inline elements tidak dimulai pada baris baru dan hanya mengambil lebar sebanyak yang diperlukan (misalnya, <span>, <a>).
block elements selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (misalnya, <div>, <p>).
inline-block elements berperilaku seperti elemen inline tetapi memungkinkan Anda mengatur lebar, tinggi, dan margin, seperti elemen block.

Daftar Lengkap CSS Properties

Table of Contents