Property CSS yang harus diketahui
 
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.
 
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.
 
 
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.
 
 kamu bisa mendeklarasikan shorthand dari border dengan cara ini:
 
div{
    border: 1px solid black;
    /* lebar, gaya dan warna */
}
 
 
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.
 
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*
 
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.
 
Demikian tutorial di atas , semoga bermanfaat dan terimakasih
 
sumber : codingan.com/