CSS kelihatannya sulit dipelajari saat pertama kali kamu mengenal CSS. Kamu mungkin bingung tentang property-property CSS yang berbeda-beda, apa kegunaannya, kapan harus menggunakannya.
Pernahkah kamu mendengar tentang Prinsip Pareto (Aturan 80-20). Aturan 80-20 adalah aturan praktis yang menyatakan bahwa 80% dari hasilnya dapat dikaitkan dengan 20% dari semua penyebab untuk peristiwa tertentu. Itu sama saja di CSS. Itulah sebabnya dalam postingan kali ini, saya akan membahas tentang properti CSS yang paling sangat digunakan dan perlu kamu ketahui.
Mari kita menggali lebih dalam.
1. Display
display memiliki banyak nilai yang berbeda, tetapi hanya 4 yang paling sering digunakan.
div {
display: block;
display: inline-block;
display: inline;
display: none;
}
block: setiap element pada halaman web merupakan box. Property display menentukan bagaimana box berperilaku. Element block merupakan element yang mengambil lebar semaksimal mungkin yang tersedia, dengan jeda baris sebelum maupun sesudah.
Dengan element block, kamu dapat mengubah lebar dan tinggi element sesuai dengan keinginan kamu, itulah sebabnya ini digunakan untuk membuat layout website.
inline: element inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak memaksakan untuk mengganti baris baru. Tapi kamu tidak bisa mengatur lebar dan tinggi element.
inline-block: Ini adalah salah satu nilai display yang menggabungkan property dari element block dan element inline. Kamu dapat menetapkan tinggi dan lebar element, dan element tersebut dapat ditampilkan di garis horizontal yang sama dengan element lainnya.
none: display:none; akan menyembunyikan element dari website dan tidak akan ditampilkan secara visual. Hal ini sangat berguna untuk membuat menu Dropdown CSS di mana opsi tambahan muncul ketika cursor berada di menu navigasi. Alasannya adalah bahwa element yang awalnya diatur ke nilai none, dan nilai none berubah menjadi nilai block saat cursor digerakkan (hover).
2. Width dan Height
width dan height digunakan (berpasangan) sama dengan display:block dan display:inline untuk mengatur lebar dan tinggi dari element HTML saat membuat sebuah website. Satuan ukuran umum untuk Width dan Height adalah: px, em, rem, % dan auto.
Property yang sangat berguna seperti max-width, min-width, max-height dan min-height mulai berlaku juga ketika kamu membuat website yang responsive. Berikut ini salah satu contoh bagaimana auto dan max-width dapat digunakan untuk memastikan gambar erat dan pas ke dalam ruang yang tersedia:
img {
max-width: 100%;
height: auto;
}
3. Margin dan Padding
Margin dan padding merupakan hal yang jelas akan ditampilkan. Mengetahui bagaimana hal ini bekerja akan sangat bermanfaat saat menulis CSS.
Margin dan padding menentukan celah antar elemen pada website. Itu sangat mirip dan memiliki satuan ukuran yang sama dengan Widht dan Height yang disebutkan di atas.
Satu-satunya perbedaan antara margin dan padding adalah, margin mempengaruhi area di luar border sedangkan padding mempengaruhi area di dalam border. Coba perhatikan model box di bawah ini:
Biasanya, margin ditulis dengan cara ini:
div{
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px
}
Itu juga dapat ditulis dengan cara shorthand untuk menyederhanakan baris kode dan membuatnya lebih mudah untuk dibaca. Berikut penjelasan singkatnya:
div{
margin: 20px 10px 20px 10px;
/* shorthand ini mengacu pada: ATAS, Kanan, Bawah, Kiri. Seperti putaran jam: 12, 3, 6 dan 9 */
margin: 20px 10px 20px;
/* ini mengacu pada: ATAS, Kiri dan Kanan, Bawah */
margin: 20px 10px;
/* ini mengacu pada: ATAS dan Bawah, Kiri dan Kanan */
margin: 20px;
/* seluruh 4 sisi margin bernilai 20px */
}
Tips tambahan: margin dengan auto di kiri dan kanan ini digunakan untuk menengahkan element dengan nilai display:block. Yang ditulis sederhana seperti:
div {
margin: 0 auto;
}
4. Border
Singakatnya, Border adalah garis tepi. Saya cukup yakin kamu tidak perlu penjelasan lebih dalam apa itu Border.
Border memiliki 3 property yang berbeda yaitu:
border-width – lebar border. Satuan ukurannya sama seperti width dan height.
border-style – gaya border. Nilai-nilai yang biasa digunakan adalah solid dan dashed.
border-color – warna border. Hex, dan RGB bisa diterapkan.
Daripada menulis dengan yang versi lama, kamu bisa mendeklarasikan shorthand dari border dengan cara ini:
div{
border: 1px solid black;
/* lebar, gaya dan warna */
}
Demikian juga untuk margin dan padding, border mengacu pada semua 4 sisi. Jika kamu hanya tertarik dalam menerapkan border untuk 1 atau 2 sisi saja, saya biasanya lebih memilih dengan border-top, border-bottom, border-left atau border-right. Belajar pemrograman setidaknya juga harus sedikit belajar Bahasa Inggris 🙂 .
5. Float
Float adalah property CSS untuk penentuan posisi. Dalam penggunaannya yang paling sederhana, property float dapat digunakan untuk membungkus teks di sekitar gambar.
Seperti yang kamu lihat sekarang, gambar logo Codingan di-float di kiri [float:left;]. Float memiliki 3 property dasar yang mungkin akan sering kamu gunakan:
- left
- right
- none – meniadakan/menghapus
float.
6. Clear
Meskipun float sangat berguna, tapi kadang-kadang memusingkan jika float tidak di-clear dengan benar. Property clear berfungsi untuk mengatur efek float. Biasanya, 2 jenis masalah ini bisa terjadi:
Ada 3 metode utama untuk membersihkan float:
clear: property clear memiliki 3 nilai yaitu left, right atau both. Seperti yang telah mungkin kamu duga, clear:left; hanya membersihkan float di sisi kiri, clear:right; membersihkan float di sisi kanan sementara clear:both; memastikan bahwa semua element float dihapus.
overflow:hidden: Metode ini sangat bagus untuk memastikan element induk agar terlihat rapi seperti di masalah 2. overflow:hidden; diatur untuk element induk agar tidak ada masalah pada layout.
clearfix: ini juga diatur untuk element induk untuk memastikan masalah float tidak muncul. Alasan menggunakan clearfix adalah untuk menyisipkan beberapa konten setelah element induk untuk memaksa elemen induk sendiri clear karena terdapat konten setelah float.
7. Color
color: di sini mengacu pada warna teks. Salah satu metode untuk menentukan warna teks menggunakan nama warna secara langsung: seperti red, green, blue, dll. Cara lain untuk mendefinisikan warna menggunakan nilai hexadesimal dan RGB. bentuk dari heksadesimal adalah tanda # diikuti oleh paling banyak, 6 nilai hex (0-F). Contoh warna magenta untuk hex: #FF00FF. Sedangkan RGB mendefinisikan nilai individual untuk Red, Green, dan Blue. Contoh warna magenta untuk RGB: rgb (255,0,255).
“Terus bagus yang mana?” Saya percaya itu adalah soal selera pribadi apakah kamu harus menggunakan RGB atau HEX. Secara pribadi saya menggunakan HEX, karena terasa lebih nyaman, lebih mudah dipindai ketika membaca kode, lebih mudah ketika disalin-Cobalah menyalin warna hex dengan dua klik mouse terasa lebih efisien kan? berbeda ketika menyalin warna RGB, karena kita harus menyeret mouse dengan menahan klik mouse.
8. Background
background mengacu pada latar belakang dari elemen HTML. Seperti kebanyakan properti CSS, background memiliki shorthand juga.
body {
background:transparent image-url("gunung.png") left top no-repeat;
/* Semua definisi background merupakan opsional, tapi setidaknya salah atu harus dicantumkan. Di atas adalah nilai-nilai default yang diberikan kepada background jika kamu tidak mendefinisikan apa-apa */
}
dan perhatikan kode diatas. Kalau kita mengartikannya kan jadi gini tow: background trasnparan gambarnya gunung berada di kiri atas dan tidak ulang-ulang. *ROTFL*
Berikut adalah penjelasan untuk properti background dalam urutan dari kiri ke kanan:
- background-color: warna background. Juga dengan nilai #hex atau nilai rgb.
- background-image: url(URI). Mengambil path dari gambar kamu. Gunakan contoh di atas jika gambar didalam folder yang sama dari file CSS. Kalau di server yang beda: url(“http://www.domainlain.com/gambar.jpg”);
- Untuk turun satu folder, ketik nama folder sebelum gunung.png tersebut. Contoh: gambar/gunung.png
- Untuk naik satu folder, ketik nama file dengan “../”. Contoh: ../gambar/gunung.png
- background-position: posisi background relatif terhadap element HTML. Dua nilai yang dibutuhkan di sini, X dan Y, di mana X adalah besarnya offset dari kiri dan Y adalah besarnya offset dari atas. Lebih lengkapnya di http://www.w3schools.com/cssref/pr_background-position.asp
- background-repeat: apakah kamu ingin background mengulang jika lebar melebihi ukuran background. Nilai-nilai untuk repeat: repeat-x (horizontal) dan repeat-y (vertical).
9. Font
font pada umumnya mengacu pada tampilan teks dalam website. Ada beberapa hal yang harus diketahui. Seperti property lainnya, font juga memiliki shorthand.
body {
font: italic small-caps bold 20px/1.5 "Open Sans", arial, sans-serif;
/* shorthand untuk font */
}
Berikut adalah penjelasan untuk properti font dalam urutan dari kiri ke kanan:
- font-style: gaya font. nilai-nilai yang valid adalah normal atau italic. Defaultnya normal. (Opsional saat ditulis secara shorthand)
- font-variant: varian font. nilai-nilai yang valid adalah normal dan small-caps. Defaultnya normal. (Opsional saat ditulis secara shorthand dan sering tidak digunakan)
- font-weight: ketebalan font. nilai-nilai yang valid adalah normal, bold, bolder, atau dengan anngka 100 – 900.
- font-size: ukuran font. Mengambil nilai satuan ukuran yang sama seperti width dan height.
- line-height: yang menentukan jumlah ruang diatas dan dibawah teks. Sangat penting untuk memastikan orang lain membaca tulisan di website dengan baik. Mengambil nilai satuan ukuran yang sama seperti font.
- font-family: untuk mendeklarasikan jenis huruf yang akan digunakan. Contoh diatas saya pakai font utama yaitu Open Sans, jika tidak tersedia mengambil alternatif font Arial, alternatif selanjutnya adalah font umum yang mirip dengan Arial yaitu sans-serif. Ingat, tambahkan tanda kutip apabila nama font lebih dari satu kata.
Kesimpulan
Yang tercantum di atas adalah 9 property CSS yang benar-benar harus diketahui. Memang hanya saya jelaskan sedikit disetiap property nya, karena hanya saya fokuskan ke 9 property yang harus diketahui. Bagaimanapun silahkan berkomentar mana property ingin diketahui lebih dalam, Insya Allah akan saya tuliskan secara khusus dalam 1 postingan. Dan jika postingan ini bermanfaat silahkan dibagikan ke temen-temen.
