Tentang CSS -Tantangan dari Seorang Teman

Pagi ini begitu login ke blog, sa juga buka tab baru untuk lihat blog sa. Eh, ada komentar terbaru dari seorang teman, yang nantang sa buat ngebahas CSS. Iya salah nulis, bukan bahasa internet, tapi browser. Soal CSS..sebenernya mah simple juga sih, cuma koding standar kaya semacam nentuin teks biar coding ga diulang-ulang di setiap page yang kita bikin.

Nah, pengertian CSS sendiri sa coba ambil dari Wikipedia versi Indonesia (langsung di CP dari sumbernya :mrgreen: )

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.”

Klo mau banyak belajar mah, banyak kok tinggal googling dengan keyword CSS, nah salah satu site yang menarik yang saya temukan adalah CSS Tutorial di W3School. Itu mah ada tingkatannya.

But, let’s learn a little ok!

Yang pernah sa pelajari CSS itu bisa digunakan untuk “menentukan” koding untuk tampilan di luar dokumen HTML yang kita bikin *klo kodingnya dalam halaman web yang kita bikin itu namanya Internal Style Sheet*. Dengan ekstension “.css” Fungsinya adalah untuk efisiensi dalam pembuatan HTML page –bahasa apapun– efisiensi itu bisa berupa:

1. Waktu. Karena koding nya udah kita simpan dalam satu file tersendir, kita tinggal manggil-manggil aja.

2. Tenaga. Karena ga usah cape-cape ngetik koding yang sama di setiap halaman web yang kita bikin. Iya klo cuma satu atau dua halaman yang dibikin, nah klo udah banyak halaman yang kita bikin, mana belum tentu juga kita inget. Bahkan untuk copy-paste aja kan butuh tenaga :mrgreen:

3. Space yang dibutuhkan. Karena tidak ada koding yang teruang akibat udah disimpen dalam astu file, maka space atau “berat” file halaman-halaman dokumen HTML kita jadi lebih sedikit.

Nah, klo buat yang blank sama sekali, saya punya sih contohnya. Jadi konsepnya gini, setiap halaman *kaya blog ini* kan punya jenis tulisan, dan “ketentuan” yang semuanya seragam, klo garis miring, semuanya jadi warna putih, klo bold jadi “biru”, dan klo link gimana-gimana, semua tampilan itu ribet klo kita simpen di setiap halaman. Makanya dalam blog ini juga dipergunakan CSS, yang di dalamnya ngatur tentang tampilan si situs atau halaman web yang kita bikin.

Misal kita pengen bikin sebuah situs yang kita tentukan setiap halaman jenis tulisannya Comic Sans, ukuran 10px, warna biru. Setiap link yang dibuat warnanya putih, klo kursor diarahkan ke link tersebut jadi merah, dan klo udah diklik jadi abu-abu. Semua itu ribet klo dibuat kodingnya di satu halaman, nah disinilah kita bikin CSS page.

Dalam CSS, untuk menentukan code nya ada cara sendiri. Bagi yang udah ngerti soal internal style sheet sih, gampang belajar CSS ini, karena CSS ini sebenernya cuma mindahin koding internal style sheet itu ke luar dokumen.

Coba lihat contoh ini

<html>

<head>
<style type=”text/css”>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}

</style>
</head>

<body>
<h1>Ini header 1</h1>
<h2>Ini header 2</h2>
<p>Ini paragraf</p>

</body>

</html>

Nanti tampilnya

Ini header 1

Ini header 2

Ini paragraf

Nah,  itulah kira-kira contoh internal style sheet. Klo external style sheet alias CSS itu..yang saya beri warna teksnya, tinggal copy paste ke sebuah dokumen web baru, trus save as dengan ekstension .css, misal test.css

Nanti untuk memanggilnya, di dokumen HTML klo pake dreamweaver mah bisa langsung klik aja button CSS di Properties, nanti di sebelah kanan atau kiri *tergantung milihnya sebagai coder atau desainer* ada CSS Style..tinggal pilih gituh deh :mrgreen:

Pasti ga ngerti da..sama 😳 belom tau cara ngejelasinnya.. mudah-mudahan ntar bisa lebih baik lagi neranginnya. Klik aja link yang saya kasih tadi, meski tutornya dalam bahasa inggris, tapi udah dipahami kok. Kaya Zend tentang tutor PHP..dalam bahasa inggris, asal kita ikutin kodingnya, ngerti sendiri kok 😀

Mungkin segitu dulu ya..mo kerja dulu 😳

One thought on “Tentang CSS -Tantangan dari Seorang Teman

Berikan Komentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s