sebelum belajar css, saya katakan bahwa css itu mudah, yah css itu mudah. maka dari itu sebelum belajar css, sahabat harus yakin bahwa css itu mudah trus itu sobat harus yakin bahwah sobat pasti bisa css “yah, kalau niat belajar pasti bisa”.
ok, mari kita mulai,
sebelumnya maaf, disini saya ngga bahas tentang, siapa yang ciptakan css, awal mula css, mengapa css diciptakan, dan lain-lain yang saya rasa tidak terlalu penting, tulisan pertama ini kita akan bahas seputar dasar-dasar css, antara lainok, mari kita mulai,
Fungsi Css
Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.
Cara Kerja Css
Cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.
Syntax Atau Aturan Penulisan
Aturan penulisan css itu sangatlah simple con
tohnya
Keterangan
- Ketiga aturan diatas hanya kita gunakan sesuai kebutuhan saja
- Sebenarnya masih ada yang lain, berhubung ini hanya pemahaman dasar jadi yang dibahas yang penting-penting saja
- Contohnya, diakhir tulisan ini
Keterangan syntax
- Diawali dengan selector atau tag_html
- Kemudian tambahkan { (buka kurung karawal)
- Abis itu barulah kita tulis propertynya
- Setelah menulis propertynya lanjutkan dengan : (titik dua) anggap seperti sama dengan pada atribut html
- Setelah : (titik dua), masukan valuenya
- Sehabis menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
- Next, jika kita tidak menambahkan property:value lagi
- Akhiri dengan } (tutup kurung karawal) fungsinya munutup selector
Property Dan Value Css
Ini adalah bagian terpenting dalam css, tanpa selector dan value sama saja dengan mandi tanpa air(kalau tanpa sabun masih mending
).
Misal kita ingin merubah warna text, property yang kita gunakan adalah color: sedangkan valuenya bisa rgb, hex color atau color.
Misal lagi kita ingin merubah ukuran font, property yang kita gunakan adalah font-size:, sedangkan valuenya bisa length(px). misalnya lagi kita ingin merubah warna latar belakang, maka property yang kita gunakan adalah background-color:sedangkan valuenya bisa rgb, hex color atau color.
Contoh
Keterangan
- Yang berwarnah merah adalah property
- Sedangkan yang berwarna biru adalah valuenya
- Setiap peroperty sudah memiliki value masing-masing, jadi jika sobat menggunakan property margin lalu valuenya #fff(white) itu sama dengan salah besar
- Contohnya, diakhir tulisan ini
- Property css itu sangat banyak, dari sekian banyak property itu kita ngga mesti menggunakan semuanya(ya kira-kira sesuai kebutuhan)
Letak Penulisan Css
Untuk belajar css, sahabat harus bisa html dulu(minimal tau penulisan serta cara karjanya).
Contoh dibawah adalah penulisan css dalam internal style
Keterangan
- Rekomendasi dari w3.org ialah penulisan style css terletak antara <head> dan </head>
- Namun, dimanapun sobat menulis kode cssnya, browser tetap akan menjalankan css tadi jika syntaxnya benar, misal letaknya di <body> disini </body>
- Sekarang itu browser sudah pada canggih-canggih beda ketika netscape masih berdiri
Komentar css
sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu
sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu
Penulisan komentar css itu seperti ini /* disini komentar css */
Keterangan
- Diawali dengan /(garis miring)
- Kemudian *(bintang) atau shift + 8
- Abis itu komentar anda
- Setelah memasukkan komentar
- Sebagai penutupnya tambahkan *(bintang) atau shift + 8
- Disusul dengan /(garis miring)
- Lihat contoh
Tidak Berpengaruh, Baku
Contoh ini
Dan contoh yang ini
Sama saja
Keterangan
- Contoh yang diatas itu bernilai sama
- Atau css itu ngga ngaruh terhadap enter(line break) ataupun spasi
- Yang perlu diperhatikan hanyalah karakter ini { : ; }
- Kita hanya akan menggunakan spasi jika property dan valuenya ditulis dengan shorthand
Contoh dan cara kerja css
Di bawah ada beberapa dua contoh penggunaan css
Contoh 1(Simple)
Untuk menjalankan codenya
- Copy kode diatas
- Buka program notepad
- Paste
- Lalu save as(pilih all files) dengan nama belajarcss1.html(pastikan ekstensi filenya adalah [dot]html)
- Setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
- Setelah hasilnya dilihat, coba edit masing-masing property valuenya yang terletak antara : dan ;
- Simpan
- Kemudian lihat hasil editan sobat
Contoh2(Sedikit Rumit)
Perhatikan markup style berikut
Untuk menjalankan codenya
- Copy kode diatas
- Buka program notepad
- Paste
- Lalu save as(pilih all files) dengan nama belajarcss2.html(pastikan ekstensi filenya adalah [dot]html)
- Setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera).
- Setelah hasilnya dilihat, coba edit masing-masing property dan valuenya yang terletak antara : dan ;
- Dari /* sampai */ adalah komentar css
- Simpan
- Kemudian lihat hasil editan sobat
Bandingkan jika ngga menggunakan css, coba hapus semua code antara
- Simpan
- Lalu lihat hasilnya
- Nah, gimana sudah tahukan fungsi css itu?
- Saya harap kita semua tahu(minimal apa itu css)
Untuk belajar alangkah baiknya jika sobat sedikit berani mengutak-atik blog sendiri!
Bagaimana Cara Edit Css Wordpress
- Appearance
- Pilih editor
- Klik style.css(biasanya ada style lain, tergantung themes)
- Coba edit valuenya yang terletak antara : dan ;
Bagaimana Cara Edit Css Blogspot?
- Langsung ke edit html
- Cari <b:skin> sampai </b:skin>
- Itu adalah style css pada blogspot
- Coba edit valuenya yang terletak antara : dan ;
Mungkin sobat bertanya fungsi dari text yang berwarnah merah ini
- Anggap saja itu adalah bentuk yang akan sobat ubah, misal #sidebar, #header, #footer.
Jadi misal sobat ngin merubah sidebar, cari saja seperti ini
- Hal yang sama berlaku untuk #header, footer, sidebarleft-right, dan lain-lain
- Sebenarnya yang berwarnah merah itu adalah selector(mungkin akan kita bahas kedepanya)
- Selector_id_maupun_class(text merah) itu ngga mesti berbasa inggris(sidebar, header, footer) yang terpenting adalah nilai atribut id dan classnya sesuai dengan style yang sobat tambahkan
- Misal
- <div id=”sidebar”
- <div id=”header”
- <div id=”footer”
- <div class=”sidebar”
- <div class=”footer”
- Oia, saya pernah membuat template blogspot berbahasa indonesia(selectornya) untuk yang pengen belajar bisa menggunakan tempalte itu, downloadnya di blogtempalte4u.com dan di zoomtempalte.com coba cari template dengan nama slow pink white(itupun kalau mau)
Tambahan
- Ada beberapa sahabat saya yang mengatakan css itu rumit, sebenarnya sih ngga rumit hanya saja dia(sahabat saya) ngga paham property css, jadi dalam belajar css, sobat juga harus paham fungsi masing-masing property serta value css itu sendiri
- Jika sobat ingin menguasai css, alangkah baiknya jika codenya diketik pakai jari(usahakan hindari copy code)
- Selalu perhatikan karakter ini { : ; }
- Gunakan editor code yang simple, untuk menulis code css sebaiknya gunakan notepad++(downloadnya cari di google free). jika sobat punya uang bisa menggunakan dreamweaver(not recoment)
- Browser, sebaiknya gunakan firefox untuk melihat hasil editan. ini karena firefox menggunakan standard yang direkomendasikan oleh w3.org
- Cobalah membuat website statis dengan css, jangan cuma ngedit. sobat kan punya komputer dan tanpa koneksi internetpun kita bisa belajar css
- Jika punya waktu luangkan waktu anda untuk ngedit css blog anda sendiri, css ini sangat mengasikan apalagi jika digabung dengan htmldom dan dinamic html(dhtml)
Semoga bermanfaat
0 komentar:
Posting Komentar