Haaah, setelah tadi posting tentang Cara Memodifikasi Kotak Komentar, sekarang Admin IndonesiaNews! akan memposting artikel tentang beberapa penjelasan tentang Kode - Kode Dalam CSS atau yang sering di sebut Cascading Style Sheets. Sedikit penjelasan tentang CSS.
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Guna CSS yg paling mencolok yaitu anda bisa mengatur tampilan sebuah web dengan mudah yg dapat di atur dengan kode - kode. Namun bagi pemula tidak mudah juga loh sob, namun bagi master - master seperti saya kang rohman mengatur kode css supaya bisa digunakan dengan sempurna itu adalah hal yang sangat mudah seperti berjalan di atas jembatan yang lebarnya 200 km! he he he
Nah, dari tadi ceramah melulu. Dari pada ngalor - ngidul ( seperti kata kang rohman ) mending langsung saja ini saya kasih penjelasannya tentang beberapa kode css.
Beberapa kode dalam CSS yang bisa saya jelaskan : + Height : 20px;
» height : Menunjukkan lebar.
» 20 : Menunjukkan tinggi. Bisa anda kreasi sendiri sesuai tinggi yang anda butuhkan.
» px : Menunjukkan satuan dalam dunia css.
+ Width: 960px;
» width : Menunjukkan lebar.
» 960 : Menunjukkan lebar. Bisa anda kreasi sendiri sesuai lebar yang anda butuhkan.
» px : Menunjukkan satuan dalam dunia css.
+ Font-weight: bold;
» font-weight : Artinya menunjukkan jenis tulisan. Jika tebal maka di belakang : tulislah bold namun jika anda menginginkan jenis tulisannya biasa atau normal maka di belakang tanda : tulislah normal !
+ background : #cccccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-O62djWuvzOaHT6fzvEcLTJux_vd45nPHjqwOM6yEVBH5xl_y_Klnt-SpCWOdHsgAGaGr2WW6sw7Uh9R7lllJhm9KhYXdk9CwUMnZw8-oOcygjQPXZqmZMWvFEX9MKdHADcBfofp_blfZ/s320-r/comment.gif) no-repeat top left;
» background : Menunjukkan latar belakang.
» #cccccc : Menunjukkan warna latar belakang. Kunjungi Kumpulan Kode Warna untuk melihat warna - warna yang bisa anda gunakan.
» url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-O62djWuvzOaHT6fzvEcLTJux_vd45nPHjqwOM6yEVBH5xl_y_Klnt-SpCWOdHsgAGaGr2WW6sw7Uh9R7lllJhm9KhYXdk9CwUMnZw8-oOcygjQPXZqmZMWvFEX9MKdHADcBfofp_blfZ/s320-r/comment.gif) : Menunjukkan gambar latar belakang. Anda bisa menambahkan gambar anda dengan mengganti tulisan "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-O62djWuvzOaHT6fzvEcLTJux_vd45nPHjqwOM6yEVBH5xl_y_Klnt-SpCWOdHsgAGaGr2WW6sw7Uh9R7lllJhm9KhYXdk9CwUMnZw8-oOcygjQPXZqmZMWvFEX9MKdHADcBfofp_blfZ/s320-r/comment.gif" dengan gambar yang anda miliki.
» no-repeat top left : no-repeat artinya tidak membujur ke arah horizontal atau sering dinamakan x maupun ke arah vertikal atau sering dinamakan y kalau di matematika. Kalao top left arinya gambar lebih berada di bagian atas kiri, jika ingin lebih berada di bagian bawah kiri berarti ubahlah menjadi bottom left jika ingin lebih berada di bagian atas kanan berarti ubahlah menjadi top right, jika ingin lebih berada di bagian atas bawah kanan berarti ubahlah menjadi bottom right.
+ Color:#ffffff; Artinya tulisan berwarna putih. Jika menginginkan warna lain, kunjungi Kumpulan Kode Warna untuk melihat warna - warna yang bisa anda gunakan. + border-bottom: 1px solid #333333; : Artinya memberi garis di bawah suatu css. Jika ingin berada di bagian atas rubahlah menjadi border-top. Jika ingin berada di bagian kiri rubahlah menjadi border-left. Daaaan jika ingin berada di bagian kanan rubahlah menjadi border-right. 1 px artinya tebal border atau garis. Jika anda menginginkan tebal sekali, bisa anda rubah angka 1 menjadi 10 20 30 .... dst.
+ border:1px solid #C0C0C0;
» border : Artinya garis tepi.
» 1 px : Artinya ketebalan garisnya 1 px. Jika anda ingin menjadikan garis menjadi tebal, rubahlah angka 1 menjadi 10 20 30 .... dst
» solid : Mengenai ini saya juga masih belum tau. Jika ada yg tau mohon si share di kotak komentar!
#c0c0c0 : Menunjukkan warna warna garis. Kunjungi Kumpulan Kode Warna untuk melihat warna - warna yang bisa anda gunakan.
+ Text-transform:uppercase;
» tex-transform : Maksudnya bentuk tulisan.
» uppercase : Maksudnya tex berbentuk besar semua. Ini mirip seperti yg ada di microsoft word. Jika anda tahu tentang microsoft word, pasti anda tahu kode-kode lain selain uppercase.
+ Padding-left: 0px;
» Padding-left : Artinya jarak dari batas kiri. Jika menginginkan jarak dari sebelah kanan, rubahlah tulisan left dengan tulisan right. dst
» 0 px : Artinya jarak dari batas kiri 0 atau tidak ada. Jika menginginka ada jaraknya, maka rubahlah tulisan 0 sesuai yg anda inginkan.
+ Font-size:14px;
» Font-size : Maksudnya ukuran font.
» 14 px : Artinya ukuran fontnya 14. Jika anda ingin menjadikan fontnya menjadi lebih kecil, rubahlah angka 14 menjadi 13 / 10 / 8 / .... dst
+ Font-family : Arial, Tahoma, Verdana;
» Font-family : Maksdunya atau berarti jenis font. Jika menginginkan jenis font arial, maka taruhlah kode arial pada tempat paling depan. Jika anda menginginkan jenis font Tahoma maka tarushlah kode Tahoma pada bagian paling depan. Untuk mengetahu semua jenis font, kunjungi Kumpulan Jenis Font Untuk Kode CSS.
Nah, gimana! Apakah anda sudah faham. Semoga dengan adanya tutorial css ini anda bisa lebih faham dan bisa mengedit template blog atau website anda supaya lebih rapi and tentunya lebih funtastic! Jika masih ada yang kurang jelas bisa ditanyakan di kotak komentar di bawah! Terimakasih
 |
wih mantap habis postingnya banyak dapat ilmu saya..makasih ya mas, tak bookmark dulu ah biar bisa baca lagi
dapat ilmu baru nih tentang css..thanks ya mas
:a: mantap gan tutornya :c:
ok mantap tutorialnya. jadi paham sekarang :)