Mari Belanja Eh.. Belajar!

Q. How many doctors does it take to change a light bulb? A. It depends on what kind of insurance you have Mari Belanja Eh.. Belajar! Jika anda orang yang suka membuat daftar (lists), CSS juga memiliki sesuatu untuk anda – dua properties yang mengijinkan anda untuk mengubah tampilan dari item-item pada penanda daftar anda. Pertama sekali, kita harus mengetahui properti “list-style-type”, yang menerima nilai “disc”, “circle”, “square”, “decimal”, “lower-roman”, “upper-roman”, “lower-alpha”, “upper-alpha” atau “none”. Lihat Contoh :

:: Daftar Belanja Siang Ini ::

1. Jeruk 1 Kg.
2. Ikan Asin Rebung 2 Kg.
3. Beras 2 Goni Plastik Besar 60 Kg.
4. Bayam 4 Ikat
5. Mie Instant 4 Kardus

anda dapat juga menggunakan suatu image/gambar biasa selain menggunakan bullet,circle dan disc default dengan properti “list-style-image” – Coba lihat ini :

:: Daftar Belanja Siang Ini ::

Kupas Sampai Tuntas

Model format CSS berasumsi bahwa tiap-tiap elemen dikelilingi oleh tiga area yang berbeda. Dimulai dari dalam keluar, area ini adalah padding, border, dan margin. Masing-masing entitas ini dapat diatur melalui spesial properties CSS, mengijinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML. Nilai margin (garis tepi) dapat kita atur besar dan letaknya melalui properti “margin-top”, “margin-bottom”, “margin-right”, dan “margin-left”, dan ditetapkan seperti ini: DIV {margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px} /* 10px width for horizontal margins, 5px width for vertical margins */ You can also use the catch-all "margin" property DIV {margin: 10px 5px 5px 10px} /* specify widths clockwise */ or set a uniform margin width with DIV {margin: 10px} /* equal width for all margins */ Anda dapat menyesuaikan lebar border dengan properties self-explanatory “border-top-width”, “border-left-width”, dan “border-rigth-width”, atau dengan menata suatu borde dengan shorcut properti “border-width”. Coba perhatikan sekali lagi! DIV {border-top-width: 50px; border-right-width: 100px; border-bottom-width: 75px; border-left-width: 125px} /* different width for each border */ DIV {border-width: 50px} /* equal width for all borders */ You can also specify border widths with the keywords "thick", "medium", "thin" and "none", like this: DIV {border-top-width: thick; border-right-width: medium; border-bottom-width: thin; border-left-width: none} DIV {border-width: thick} Dan akhirnya, padding dapat diatur dengan.. ya bener, anda telah menduganya! Properti “padding-top”, “padding-bottom”, “padding-right”, dan “padding-left”. Untuk ini penulis tidak usah mencontohkannya, anda coba saja sendiri! Hehehe.. bukan malas, menghemat kertas adalah jawaban bijaknya ☺ CSS juga mengijinkan anda untuk mengatur warna border anda dengan properties “border-color”. Contoh di bawah akan menunjukkan bagaimana “border-color” bekerja!

Tutorial Cascading Style Sheet

Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita (udah berapa kali kata-kata ini diulang, tapi lagi-lagi cuek aja deh). Yang terpenting sekarang setidaknya kita sudah bisa membuat sebuah kelas. Selektor Kontekstual (Contextual-Selector) Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold dan italic tampil dengan huruf arial dan berwarna biru. Selektor-Kontekstual nya akan seperti ini : Ayo sekarang dicoba! Apakah saya kelihatan sedang berbohong? Tentu tidak. Kebiasaan saya kalau sedang berbohong mengedip-ngedipkan mata (abe: sedang berusaha agar matanya tidak berkedip-kedip c",) hehehe gak ding cuman canda. Suer! CSS menawarkan berbagai macam cara untuk mengganti warna. Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kreiss). I {color: #0000FF) Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti ini : I {color: rgb (0, 0, 255)) I {color: rgb (0%, 0%, 100%)) Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita sukai.

Sebenernya semua pekerjaan itu mudah!

Setuju, tapi tak semudah mengatakannya ☺ Abe Poetra 􀀹 Masih bego’ pemrograman dan tidak tau apa-apa tentang komputer 􀀹 Berarti dengan hadirnya artikel ini maka penulis telah memenuhi permintaan para pembaca yang merasa penasaran ingin mempelajari “borders”, “padding”, “posisition”, dan “konsep watermark”. 􀀹 Kunjungi http://www.ilmukomputer.com/penulis/penulis-abepoetra.php untuk melihat jati diri penulis ☺ BIOGRAFI PENULIS Abe Poetra. Dilahirkan dengan nama asli Abdi Januar Putra. Lahir di Binjai, 15 Januari 1981 sebagai anak yang bersahaja dan berbakti kepada Orang Tua. Menamatkan Bangku Kuliah di D3 Ilmu Komputer FMIPA-USU pada tahun 2002 dengan penuh perjuangan dan untung saja tamat dengan Nilai yang seadanya (lho kok?). Pernah dipercaya sebagai Assisten Lab. Untuk Fortran, Pascal, dan Bahasa C. Memiliki banyak teman dan lebih banyak lagi musuh hehehe.. ☺ Baru seumur jagung belajar Linux di KPLi-Medan, walaupun begitu, terpilih sebagai Sekretaris Umum untuk periode 2002-2004, dan saat ini sedang belajar serius LAMP (Linux Apache MySQL dan PHP) bersama beberapa sesepuh di kawah candradimuka nya KPLi Medan (PoliTekhnik Negeri Medan). Bersama rekan-rekan patungan modal mendirikan sebuah usaha yang bergerak dalam usaha warung internet (GO-Internet, juga sebagai sekretaiat KPLi-Medan), penjualan komputer, software komputer dan Jaringan, dan penulis dipercaya sebagai ketua Divisi LITBANG. Abe Poetra juga ditunjuk sebagai Manager Marketing PT. Gayo Belangi Coffee yang berdomisili di Medan. Beberapa bulan terakhir waktunya dihabiskan untuk meneliti dan mempelajari kopi yang siap dipasarkan keseluruh dunia melalui internet. Informasi lebih lanjut tentang penulis ini bisa didapat melalui: URL: http://go.fmipa.usu.ac.id Email: abe_poetra@yahoo.com, abe@go.fmipa.usu.ac.id