Belajar Mengolah Div Style CSS

Bismillaah..

Alhamdulillaah, kembali saya hadir dengan postingan yang pastinya membuat Anda puyeng membacanya, (apalagi saya yang membuat tulisan ini, super duper mumet).


Tapi tidak mengapa, ini postingan sebenarnya saya tujukan buat seorang teman yang meminta saya membuat tutorial tentang css style, dan langsung saja saya beri judul 'Cara Mengolah Css Style', entah nyambung entah tidak, yang terpenting Anda puas sayapun lega, karena hasil ketak-ketik saya barangkali, bermanfaat.
Saya mulai sekarang sobat, kita langsung ke inti 'panduan', tapi saya akan sedikit memberi gambaran sesederhana mungkin tentang apa itu 'css style'.

Setuju atau tidak, saat Anda membuka menu internet pada hp, tablet, hh, pc maupun laptop, Anda akan disuguhi tampilan beraneka-rupa dari situs yang Anda kunjungi misal fb, google, twitter dan lain nya (tak lupa mwb tentunya).

Semua situs tsb punya ciri khas tampilan masing-masing, dan ini dia, tampilan yang berbeda, tentu ada yang mengaturnya, entah warna halaman, teks, dan lain nya.




CSS (kalau tidak salah singkatan dari Cascading Style Sheet, kalau salah mohon dikoreksi) merupakan hal pokok dari sebuah situs manapun, tanpa css, tentu sebuah situs akan kurang menarik, dan pengunjung tentu cepat merasa bosan. Google, situs bermesin pencarian terbesar di dunia (saat ini), pun menggunakan css style (sebut saja template, div) walau tampilan nya amat sederhana, putih dgn teks warna biru.




Kurang lebih maksud saya, css amatlah penting, entah itu buat yang pertama kenal blog, wap, nah kalo fb? hehe tak perlu dibahas, fb sudah menjadi besar dgn gaya nya yang dermawan.




Kata mbah google: 'css merupakan suatu bahasa stylesheet yg digunakan untuk mengatur tampilan sebuah dokumen yg dicetak dalam bahasa markup.

Umumnya css digunakan untuk memformat halaman website yg ditulis dgn HTML, XHTML, XML, SVG, PHP juga XUL, dan tentunya spesifikasi css itu sendiri tak lepas dari pengaturan W3C (World Wide Web Consortium).




Untuk menampilkan fungsi css, biasanya menggunakan program HTML, dari 'div style', 'div class' sampai 'div id'. Div id diawali dgn tanda pagar '#', sedangkan div class diawali dengan tanda titik '.', dan div style langsung berisi value/isi dari div itu sendiri.



Bingung? Saya akan berikan gambaran singkat nya.



-

#content { disini berisi warna bg, gambar bg, warna teks, jenis font teks, border/garis sisi, jarak keluar/margin, jarak kedalam/padding }

Ini namanya div id content, untuk menampilkan fungsinya (untuk mwb, bisa diterapkan pada postingan blog dan juga mengatur menu navigasi) kita gunakan code html:

<div id="content">disini letak Link HTML maupun BBCode</div>


-

.content { isi value }

Dan ini namanya div class content, untuk menampilkan fungsinya, gunakan code berikut:


<div class="content">disini boleh ditulis html atau bbcode link, gambar dan lainnya</div>


-Untuk div style, kita bisa berkreasi secara bebas, baik itu di postingan blog, catatan fb (sudah support beberapa code html), menu navigasi mwb, maupun halaman web manapun.


Saya berikan beberapa contoh pengolahan css style, mulai dari:


1. CSS Style dasar


Hanya warna latar/bg/background dan teks yang termuat:



<div style="background: #fff; text-color: #000;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

2. Div Style dgn Margin (antara garis border dan bagian luar div) dan Padding (jarak antara isi div misal teks dll ke garis border), Anda boleh mencoba dgn poin pixel pada margin dan padding, makin besar poin pixel, akan semakin jauh jaraknya (penulisan 1 pixel biasanya menggunakan 1px):


<div style="background: #fff; text-color: #000; margin: 2px; padding: 2px;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

3. Div Style dgn Gambar Gradient Atas-Bawah (repeat-y)


Untuk membuat suatu div style yg mempunyai efek dua warna berbeda, kita memerlukan gambar gradient, bentuknya yg saya anggap seperti lidi atau jarum, dan ini dia gambarnya:




Dengan fungsi repeat-y/ditarik-ulur ke atas-bawah, efek dua warna berbeda akan mempercantik tampilan halaman web yang memakai div style ini:


<div style="background:url(http://muchopick.mobie.in/file/images/lidi-tiduran_1.png) repeat-y 50% center,#fff; text-color: #000; margin: 2px; padding: 2px;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

4. Div Style dgn Gambar Gradient Menyamping (repeat-x)


Kali ini saya akan gunakan lidi yang berdiri tegak untuk membuat efek dua warna menyamping:




Untuk fungsi repeat-x/ditarik-ulur ke kanan-kiri, efek dua warna yg berbeda akan menambah cantik dan menarik pada tampilan halaman situs manapun yang memakai div style ini:



<div style="background:url(http://muchopick.mobie.in/file/images/lidi-berdiri.png) repeat-x 50% top,#fff; text-color: #000; margin: 2px; padding: 2px;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

5. Div Style dgn Border


Sepertinya kurang menarik jika tidak diberi garis tepi yang bernama 'border'.


Border terdiri dari beberapa jenis (dashed, dotted, inset, outset, double, silahkan praktekkan sendiri ya untuk mengetahui seperti apa penampilan dari aneka border tsb), dan diatur lewat poin pixel. Makin tinggi nilai poin pixelnya, maka makin tebal bordernya:


<div style="background:url(http://muchopick.mobie.in/file/images/lidi-berdiri.png) repeat-x 50% top,#fff; text-color: #000; margin: 2px; padding: 2px; border: 1px solid red;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

6. Div Style dgn gambar icon


Untuk mengatur letak gambar icon, silahkan pilih:
'left top' - kiri atas,
'right top' - kanan atas,
'left bottom' - kiri bawah,
'right bottom' - kanan bawah,
atau center seperti contoh ini:

<div style="background:url(http://muchopick.mobie.in/file/images/pic.png) no-repeat center,url(http://muchopick.mobie.in/file/images/lidi-berdiri.png) repeat-x 50% top,#fff; text-color: #000; margin: 2px; padding: 2px; border: 1px solid red;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

7. Div Style dgn Gambar icon full


Jika Anda mau laman yg full icon maka gunakan code ini:
<div style="background:url(http://muchopick.mobie.in/file/images/pic.png),url(http:/muchopick.mobie.in/file/images/lidi-berdiri.png) repeat-x 50% top,#fff; text-color: #000; margin: 2px; padding: 2px; border: 1px solid red;">teks, link atau gambar</div><br />
Tampilan nya akan seperti ini :

teks, link atau gambar

Seindah apapun div style yg Anda pakai, ingat, situs web, blog yg Anda kelola mempunyai pengunjung tak terduga, dan jangan sampai dia kapok gara-gara loading blog Anda super duper berat dan lama.



Tinggal Anda tentukan sendiri bagaimana baiknya.