* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background-color: black; } .badan { width: 880px; margin: 35px auto; background-color: white; padding: 20px; overflow: hidden; } .badan h2 { color: crimson; border-bottom: 1px solid gainsboro; margin: 5px; margin-bottom: 13px; } .list-produk { border: 1px solid gainsboro; padding: 10px; float: left; width: 200px; margin: 5px; } .list-produk:hover { transition-duration: 700ms; box-shadow: 5px 5px gainsboro; } .list-produk img { width: 100%; height: 175px; display: block; margin-bottom: 5px; } .list-produk h4, .list-produk h5 { color: crimson; text-align: center; margin-bottom: 5px; } .tombol { text-decoration: none; border-radius: 7px; padding: 7px; display: block; float: left; width: 45%; margin: 4px; text-align: center; color: white; } .tombol:hover { background-color: black; transition-duration: 700ms; } .tombol-detail { background-color: green; } .tombol-beli { background-color: crimson; }
Skip to content Skip to sidebar Skip to footer

Merapikan Kode CSS dengan Styleneat

Review cara merapikan kode CSS dengan tool Styleneat. Cascading Style Sheet merupakan komponen pembantu dari sebuah halaman HTML. Style ini yang akan memberikan berbagai macam instruksi kepada browser apa yang seharusnya di tampilkan. Sebagai Contoh :

html {font-family:verdana, tahoma; color:red;}

CSS ini menginstruksikan browser untuk menampilkan font Verdana berwarna merah. Jika font Verdana tidak ada di komputer sebagai gantinya browser akan mengambil font Tahoma.

Ada semacam tool untuk merapikan CSS tersebut online, namanya Styleneat. Maka jika kode itu saya rapikan lewat Styleneat akan seperti di bawah. 

html {
    font-family:verdana, tahoma; 
    color:red;
    }

Jadi setiap properti CSS akan dapat dibaca dengan mudah oleh kroma browser. Terus bagaimana dengan penggunaanya. Silahkan ikuti review sedikit dari saya. hehe.. Saya coba Upload CSS dengan nama CSS_Kangmis di CSS Validator milik W3C. Kita tahu bahwa W3C adalah sebuah badan organisasi yang dikelola banyak orang pintar dan yang pasti akan terjadi sedikit kesalahan. 


Saya cek ternyata W3C mengatakan Selamat bahwa CSS anda tidak ada kesalahan. Akhirnya saya sangat senang sekali mendapat pujian dari mbah W3C. Karena memang CSS yang berjumlah 510'an baris tersebut sudah saya teliti selama bermenit-menit sampai njinggleng.


Selanjutnya muncul sebuah ide dari otak saya.. Tuingg.. Bagaimana kalo CSS awut-awutan ini dibikin rapi. Jadi jika kelak saya mau mengeditnya bisa dengan mudah tanpa menyeabkan pusing kepala dan gatal-gatal. Dan selanjutnya dengan cekatan saya mencoba untuk merapikan skrip CSS yang tadi saya susun di website Styleneat.Com biar kelihatan agak sedikit ganteng. Sekalian membackup barangkali terjadi kesalahan. Saya membuka Websitenya kemudian memasukkan Stylesheet di sana. 


Setelah beberapa saat Jadi dech CSS yang lebih Perpekk.. :) Kemudian save untuk saya lihat.



Dan hasilnya CSS Kang Mis sekarang tidak acak-acakan. Style Tab perbaris jadi semakin keren. Dan juga Stylenet ini mengurutkan property berdasarkan tingkatannya. Seperti kata ahli Webmaster, bahwa semakin bagus tata letak CSS maka browser akan cepat menanggapinnya. Termasuk tata letak dan tingkatan eksekusi propertinya.
Untuk yang terakhir saya coba kembali untuk memasukkan CSS dari Styleneat tersebut ke dalam W3C yang tadi digunakan sebagai Validasi Skrip Tahap Pertama. Saya masukkan .. Mak Lheeesss.... Glundhenngg....


Dan apakah yang terjadi saudara-saudara. Kita lanjutkan setelah komersial break berikut ini.. (wkwkw.. iklan ya'e...) dan Ternyata aku sedih.. Kenapa,, temenku nanya.. ditinggal pacar..??.. Saya jawab Bukaan.. Terus kenapa..?? Pacar kamu pacaran sama pacarnya..?? Bukan.. Trus kenapa.. Apa pacar kamu dirayu orang lewat Facebook...?? Bukaaaannn.. CSSku Lucaaaaaakk..... Hik.. hik....



W3C bilang kalo pacar setia saya ternyata selingkuhh.. ehh salah... CSS yang habis saya masukkan rusak. Sorry! We found the following errors (22). Padahal pada awalnya tadi W3C bilang Congratulation! No Error Found. Semu ra percoyo, Saya mencoba untuk njinggleng ya kedua kalinya dan ternyata apa yang dikatakan W3C benar. Di Line 171 di bagian url background tersemat apa yang namanya Spasi (welach.. semua juga tau apa itu spasi).. Yang secara nalar URL akan dianggap Not Found jika mengandung spasi didalamnya. Coba anda lihat di bawah...


Dan juga masih banyak error yang lain seperti hilangnya tanda penutup CSS dll. Untung saja CSS masih ada backup. hehe.. dan akhirnya saya masih menggunakan CSS yang asli di komputer saya. Bukan hasil dari Styleneat

Okey dech.. Sementara itu review Penggunaan Styleneat untuk merapikan tatanan kode CSS kita. Dan itu hanya sekedar review saya. Lebih jelasnya bisa anda coba sendiri dengan CSS yang anda sediakan. Penggunaan Styleneat tergantung anda. Mau menggunakan silahkan.. Atau jika masih suka dengan tatanan awut-awutan tapi tidak ada kesalahan pemrograman di dalamnya silahkan. Tapi yang pasti Styleneat juga patut kita coba dan cukup bagus karena membuat web sperti itu adalah sebuah pengorbanan siang malam bagi empunya. Daaann... Akhirnya..
Terimakasih telah membaca tutorial keren saya mengenai bagaimana caranya merapikan CSS dengan Styleneat.com. dan Maaf kalau judulnya tidak tepat sesuai dengan yang anda pikirkan sebelumnya. Selamat malam.. Mau bobok dulu.. udah jam 2 lebih..
 
m