Mempelajari web desain sangat paling diminati belakangan ini, Apakah kamu telah mempelajari CSS sebelumnya? Sejauh ini, CSS terus mengalami perubahan fitur pada setiap versinya (terbaru adalah CSS3). Pada kesempatan kali ini kita akan membahas kumpulan kode css yang sering sekali digunakan oleh web desainer. Kode CSS bisa disebut properti atau selektor yang dimana pada elemen html dapat di panggil menggunakan properti tertentu. maka dari itu kita lihat apa saja sih kode-kodenya?
Baca Juga : Gaya Modern! Desain Tabel HTML dengan CSS
100 Kumpulan Kode CSS
Inilah Berikut adalah 100 perintah properti CSS yang sering digunakan tanpa bintang:
1. color: Menentukan warna teks.
2. font-family: Menentukan jenis huruf.
3. font-size: Menentukan ukuran huruf.
4. font-weight: Menentukan ketebalan huruf.
5. font-style: Menentukan gaya huruf (misalnya, miring).
6. text-align: Menentukan penataan teks.
7. text-decoration: Menentukan dekorasi teks (seperti garis bawah).
8. background-color: Menentukan warna latar belakang elemen.
9. margin: Menentukan margin dari keempat sisi elemen.
10. padding: Menentukan jarak antara konten dan tepi elemen.
11. border: Menentukan batas elemen.
12. border-radius: Menentukan sudut melengkung dari elemen.
13. width: Menentukan lebar elemen.
14. height: Menentukan tinggi elemen.
15. display: Menentukan tata letak elemen.
16. float: Menentukan elemen untuk melayang di sekitarnya.
17. clear: Menentukan sisi mana yang tidak diperbolehkan ada elemen melayang.
18. position: Menentukan tata letak elemen.
19. top: Menentukan jarak elemen dari atas.
20. right: Menentukan jarak elemen dari kanan.
21. bottom: Menentukan jarak elemen dari bawah.
22. left: Menentukan jarak elemen dari kiri.
23. z-index: Menentukan urutan tumpukan elemen.
24. opacity: Menentukan kejelasan elemen.
25. visibility: Menentukan apakah elemen terlihat atau tersembunyi.
26. overflow: Menentukan perilaku ketika konten terlalu besar untuk kontainer.
27. list-style: Menggabungkan properti untuk mengatur tata letak daftar.
28. cursor: Menentukan bentuk kursor saat di atas elemen.
29. background-image: Menentukan gambar latar belakang.
30. background-position: Menentukan posisi awal gambar latar belakang.
31. background-repeat: Menentukan apakah gambar latar belakang diulang.
32. background-size: Menentukan ukuran gambar latar belakang.
33. box-shadow: Menambahkan bayangan pada elemen.
34. text-shadow: Menambahkan bayangan pada teks.
35. line-height: Menentukan tinggi garis untuk teks.
36. word-spacing: Menentukan jarak antara kata-kata.
37. letter-spacing: Menentukan jarak antara huruf.
38. white-space: Menentukan bagaimana ruang putih diperlakukan dalam teks.
39. text-transform: Mengubah tampilan teks (huruf besar atau kecil).
40. overflow-x: Menentukan perilaku horizontal overflow.
41. overflow-y: Menentukan perilaku vertikal overflow.
42. transform: Mengubah elemen menggunakan transformasi.
43. transition: Menentukan transisi elemen.
44. animation: Menentukan animasi elemen.
45. flex-direction: Menentukan arah penempatan item dalam kontainer flex.
46. flex-wrap: Menentukan apakah item fleksibel harus melingkupi baris atau tidak.
47. flex-flow: Menggabungkan flex-direction dan flex-wrap.
48. justify-content: Menentukan bagaimana item harus didistribusikan di sepanjang sumbu utama dari kontainer flex.
49. align-items: Menentukan bagaimana item harus diatur di sepanjang sumbu silang dari kontainer flex.
50. align-self: Menentukan bagaimana item harus diatur dalam sepanjang sumbu silang, mengesampingkan nilai dari align-items.
51. flex-grow: Menentukan seberapa besar item fleksibel dapat memperluas relatif terhadap item fleksibel lainnya dalam kontainer flex.
52. flex-shrink: Menentukan seberapa besar item fleksibel dapat menyusut relatif terhadap item fleksibel lainnya dalam kontainer flex.
53. flex-basis: Menentukan ukuran awal dari item fleksibel.
54. order: Menentukan urutan visual dari elemen.
55. grid-template-columns: Menentukan kolom dalam grid.
56. grid-template-rows: Menentukan baris dalam grid.
57. grid-template-areas: Menetapkan area untuk elemen dalam grid.
58. grid-column-start: Menentukan awal kolom elemen.
59. grid-column-end: Menentukan akhir kolom elemen.
60. grid-row-start: Menentukan awal baris elemen.
61. grid-row-end: Menentukan akhir baris elemen.
62. grid-column: Menggabungkan grid-column-start dan grid-column-end.
63. grid-row: Menggabungkan grid-row-start dan grid-row-end.
64. grid-area: Menggabungkan grid-row-start, grid-column-start, grid-row-end, dan grid-column-end.
65. place-items: Menggabungkan align-items dan justify-items.
66. place-content: Menggabungkan align-content dan justify-content.
67. gap: Menentukan jarak antara grid items.
68. row-gap: Menentukan jarak antara baris dalam grid.
69. column-gap: Menentukan jarak antara kolom dalam grid.
70. box-sizing: Menentukan bagaimana elemen menghitung dimensi.
71. border-collapse: Menentukan cara batas tabel berinteraksi.
72. border-spacing: Menentukan jarak antara batas sel.
73. caption-side: Menentukan posisi keterangan pada tabel.
74. empty-cells: Menentukan cara sel kosong ditampilkan dalam tabel.
75. table-layout: Menentukan cara tabel didistribusikan dan ukuran kolom.
76. content: Menentukan konten yang dihasilkan menggunakan pseudo elemen.
77. counter-increment: Menentukan cara penghitungan diubah oleh konten elemen.
78. counter-reset: Menentukan pengaturan awal untuk penghitungan.
79. quotes: Menentukan tanda kutip untuk konten yang dihasilkan.
80. page-break-before: Menentukan perilaku pemisahan.
81. page-break-after: Menentukan perilaku pemisahan halaman setelah elemen.
82. page-break-inside: Menentukan perilaku pemisahan halaman di dalam elemen.
83. orphans: Menentukan jumlah baris minimum yang harus ditampilkan di awal halaman.
84. widows: Menentukan jumlah baris minimum yang harus ditampilkan di akhir halaman.
85. background: Menggabungkan semua properti latar belakang dalam satu aturan.
86. border-top: Menentukan batas atas dari elemen.
87. border-right: Menentukan batas kanan dari elemen.
88. border-bottom: Menentukan batas bawah dari elemen.
89. border-left: Menentukan batas kiri dari elemen.
90. outline: Menggabungkan semua properti kontur dalam satu aturan.
91. outline-color: Menentukan warna kontur.
92. outline-width: Menentukan lebar kontur.
93. outline-style: Menentukan gaya kontur (misalnya, solid atau dashed).
94. outline-offset: Menentukan jarak antara kontur dan elemen.
95. cursor: Menentukan gambar kursor atau gaya kursor.
96. page-break-inside: Menentukan apakah elemen dapat dipisahkan di dalam halaman.
97. box-shadow: Menambahkan bayangan ke elemen.
98. text-shadow: Menambahkan bayangan teks ke teks.
99. letter-spacing: Menentukan jarak antara karakter dalam teks.
100. word-spacing: Menentukan jarak antara kata dalam teks.
Penutup
Fungsi dari CSS adalah untuk mengontrol tampilan dan presentasi dari halaman web. Kamu dapat menggunakan CSS dengan HTML untuk membuat desan website yang kekinian dan modern, itulah kumpulan kode css yang sudah kami sajikan. mudah-mudahan bermanfaat. Terimakasih jangan lupa klik tombol share ya!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
