cloud-hosting-terbaik-indonesia

Tutorial Belajar CSS Part 1: Pengertian CSS, Apa yang dimaksud dengan CSS?

Posted on

CSS atau Cascading Style Sheets adalah bahasanya desainer web. Namun sesungguhnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS pada artikel ini.


Pengertian CSS

Pada bahasa bakunya, seperti di kutip dari wikipedia, CSS ialahkumpulan kode yang digunakan bagi mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya ialah HTML.

Bagi pengertian bebasnya, CSS ialah kumpulan kode program yang digunakan bagi mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita dapat mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) segala kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML diperuntukkan bagi merancang struktur, atau konten dari halaman web. Sedangkan CSS digunakan bagi tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.


Manfaat dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan keperluan akan halaman web yang semakin kompleks. Di awal kemunculan HTML, kita dapat merancang suatu paragraf bewarna merah dengan menulis seketika kode tersebut didalam tag HTML, atau merancang latar belakang sebuah halaman dengan warna biru. Contoh kode HTML bagi hal itu ialah selaku berikut:

Saya menggunakan tag <font> bagi merancang beberapa kata di pada paragraf tersebut berwarna merah. Hal ini tak salah, dan semuanya berjalan sesuai keinginan. Bagi sebuah artikel yang mempunyai 5 paragraf, kita tinggal copy-paste tag <font color=”red”> di kata-kata tertentu.

Namun setelah situs tersebut mempunyai katakanlah 50 artikel seperti diatas, dan karena sesuatu hal kamu ingin merubah seluruh text merah tadi menjadi biru, karenanya akan dibutuhkan waktu yang lama bagi mengubahnya satu persatu, halaman per halaman.

Pada kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Bagi paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

Pada contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri adalah tag yang tak bermakna, namun dapat di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class bermanfaat bagi memasukkan kode CSS di tag <style> di bagian head. (Lebih lanjut mengenai tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)

Seandainya kita ingin merubah seluruh warna menjadi biru, karenanya tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang mempunyai class=”warna” akan otomatis berubah menjadi biru.

CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Pada panduan berikutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.


eBook CSS Uncover Duniailkom

Seandainya kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/