CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah "kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup" , dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, "HTML for content, CSS for Presentation".
Fungsi dan Kegunaan CSS
Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:
<!DOCTYPE html> <html> <head>      <title>Test Tag Font HTML</title> </head> <body>  <p>    CSS merupakan bahasanya <font color="red">desainer web</font>.    Namun sebenarnya, apa itu CSS?  <br />    <font color="red">CSS </font> adalah kumpulan kode yang digunakan    untuk mendefenisikan desain dari bahasa markup,    <font color="red">salah satunya adalah HTML</font>.  <br />    Dengan CSS kita bisa mengubah desain dari    <font color="red">text, warna, gambar dan latar belakang</font>    dari (hampir) semua kode tag HTML.  </p> </body> </html>
Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color="red"> pada kata-kata tertentu.
Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba 'memisahkan' tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:
<!DOCTYPE html> <html> <head> <title>Test Background Color CSS</title> <style type="text/css"> .warna { color: red; } </style> </head>  <body>    <p>      CSS merupakan bahasanya <span class=warna>desainer web</span>.      Namun sebenarnya, apa itu CSS?    <br />      <span class=warna>CSS </span>adalah kumpulan kode      yang digunakan untuk mendefenisikan desain dari bahasa markup,      <span class=warna>salah satunya adalah HTML</span>.    <br />      Dengan CSS kita bisa mengubah desain dari      <span class=warna>text, warna, gambar dan latar belakang</span>      dari (hampir) semua kode tag HTML.    </p> </body> </html>
Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class="warna". Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. (Lebih lanjut tentang tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)
Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class="warna" akan otomatis berubah menjadi biru.
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Dalam tutorial selanjutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.
Gan kodingnya gabisa gan, tidak bewarna. Saya udah coba copas juga tidak bewarna juga. Mohon bantuannya gan
saya juga baru belajar gan, ternyata harus ditambah seperti penjelasan di atas.
Maaf gan, ternyata memang ada kesalahan. Kemungkinan terfilter pada saat posting artikelnya. Silahkan dicoba lagi, kodenya sudah saya update. Terimakasih atas koreksinya.
Iya Gan ane juga gak bisa neh, warna text tetap default di Black.
Mohon Solusinya ?
Thank's
Maaf gan, ternyata memang ada kesalahan. Kemungkinan terfilter pada saat posting artikelnya. Silahkan dicoba lagi gan, kodenya sudah saya update. Terimakasih atas koreksinya.
tAnk
trmakasih dngan artikelnya mas
aku sngat trbantu dan menambh pengalamanku tentang CCS
Thanks gan…
lanjut
Alhamdulillah, sedikit demi sedikit belajar HTML dan CSS disini mulai bisa dipahami :)
Target saya Insya Allah kurang lebih 2 tahun bisa paham ilmu programming biar bisa membuat theme WordPress sendiri.
Kata teman-teman saya kalau mau buat theme WordPresskan dari PHP, tapi belajarnya dari HTML, CSS, dan JavaScript dulu. Lumayan belajar disni cukup lengkap. Thanks buat mas Andre.
Mas kalau sempet nanti buatin juga dong tutorial membuat theme wordpress dari nol. :)
Terima kasih
Amiin… mudah2an kesampaian dalam 2 tahun ini menguasai web programming dan bisa buat theme wordpress sendiri :)
Iya mas, pembahasan mengenai wordpress nanti akan saya lengkapi setelah tutorial/ebook HTML, CSS, PHP, MySQL dan JavaScript selesai. Soalnya kalau ingin membuat theme wordpress, seluruh bahasa ini wajib dipelajari.
Tutorial yang sangat membantu bagi pemula seperti saya gan. Sudah saya coba dan berhasil, saya akan terus belajar dari website agan. Terimakasih atas free tutorialnya.
Siip, lanjut gan…
Terima Kasih min atas postingannya sangat membantu sekali bagi saya
Thanks gan sangat membantu
ijin serap ilmu ya gan XD
Siip, silahkan…
sangat" terima kasih :) membantu sekali
Mas, mau tanya klo bootstrap sama css itu lebih enak mana ya? Lebih fleksible yang mana?
Jika ingin yang lebih fleksibel, tentu menggunakan CSS dari nol (istilahnya native CSS). Kalau menggunakan bootstrap, kita harus mengikuti aturan yang ada di dalamnya. Tapi Bootstrap menawarkan proses design yang cepat (jika dibandingkan buat dari nol dengan CSS).
Bootsrap itu sebenarnya terdiri dari kumpulan kode2 CSS siap pakai. Tanpa paham dasar2 CSS, juga tidak bisa langsung mempelajari Bootstrap.
Oke mas terima kasih
Saya sudah selesai membaca semua tentang html dasar dari duniailkom. Apakah saya sudah bisa melanjutkan tentang CSS dasar? Atau saya mesti memahami dulu materi lanjutan dari HTML?
Bisa ke materi lanjutan HTML dulu agar lebih paham terkait HTML.
Terima kasih saya yang pemula
Artikel nya sangat membantu untuk belajar CSS .
Siip, semoga bisa bermanfaat..
berminat beli eBook HTML, CSS, PHP, Javascript dan MySQL berapa harga totalnya dan konfirmasinya bisa by WA nggak?
Siap, silahkan di cek emailnya, atau bisa kontak saya via WA ke 083180285808. Terimakasih :)
mau tanya gan, kalo page source kan bisa nympe ratusan ribuan nih. itu ngetik sendiri apa gimana gan?
Kalau untuk web2 besar, kode programnya memang bisa sampai ratusan ribu baris. Sebagian besar tetap ditulis sendiri atau pakai tim, sisanya bisa pakai kode yang dibuat orang lain (library atau framework).
makasi lho duniailkom, nonstop belajar dr html sampe skrng hahahah
Hehe.. siip, semoga bisa bermanfaat…
Gan itu isi dari atribut class adalah "warna" maksudnya apa ya?
Kalau warna kan bahasa Indonesia dan kalau color kan bahasa Inggris?
Pertanyaannya adalah kenapa pakai bahasa Indonesia bukan pakai bahasa inggris/color, dan saya sudah mencobanya pakai color tapi enggak bisa, dan terus programming kan bahasa Inggris bukan bahasa Indonesia?
Terima kasih gan atas jawabannya…
Nama atribut merupakan sebuah nilai (value). Di sebuah bahasa pemrograman, nilai ini bisa diisi apa saja.
Yang harus dalam bahasa inggris hanya perintah2 tertentu saja, itupun tidak banyak.
bang, ini kalo ditulis seperti ini boleh ga sih? apa kudu sama kek contohnya?
soalnya saya coba ga ngaruh kok, hehe.
<style type="text/css">
#kalimat{font-weight: bold;}
.miring{font-style: italic;}
</style>