Tutorial CSS Part 1: Pengenalan CSS

Anda telah mencapai part 1 dari 1 tutorial Belajar CSS

Halo sahabat Iltekkomputer, pada tutorial berseri kali ini, saya ingin membahas tentang CSS dasar dan juga CSS3 yang lebih powerful untuk web design. Anda disarankan sudah familiar dengan HTML terlebih dahulu sebelum mengikuti tutorial ini. Iltekkomputer mempunyai tutorial HTML Dasar yang membantu anda memahami fundamental HTML. Jika belum melihat nya, silahkan lihat disini.

Nostalgia Terhadap HTML

HTML sebenarnya tidak di rancang untuk menentukan aspek visual pada sebuah desain website. Terlebih ketika kita menyadari jika HTML5 lebih menitikberatkan pada konsep semantik alih-alih sisi visual dan kecantikan yang mampu disajikan oleh sebuah halaman website. Karena bersifat semantik, maka tag-tag HTML5 lebih mengarah kepada bagaimana sebuah dokumen website dibagi-bagi menurut struktur dokumen, dan tidak mengarah kepada bagaimana mempercantik sebuah website. Oleh karena itu, tidak heran jika tag-tag yang selama ini dikenal untuk mempercantik website seperti <font>, <center>, <b>, dan <i> tidak lagi diikutsertakan pada HTML5.

Dalam perkembangan selanjutnya, para desainer website tidak puas jika hanya membuat website yang sederhana dan monoton walaupun ditulis menggunakan HTML5 yang baik dan benar. Untuk “menutup kelemahan” yang ada di HTML, terutama dalam sisi visual, di ciptakanlah script atau bahasa baru yang digunakan sebagai “pendamping” HTML tersebut. Dari sini, kita mengenal bahasa itu dengan nama CSS (Cascading Style Sheet). Jadi, bisa disimpulkan secara sederhana sebagai berikut, “HTML5 digunakan untuk menentukan struktur dokumen website dan CSS bertugas untuk mempercantik website tersebut. Kita bisa analogikan seperti seorang arsitek dan desainer interior. Arsitek bertugas menciptakan pondasi rumah termasuk membagi rumah itu menjadi beberapa ruang sesuai fungsinya. Sedangkan untuk mempercantik rumah tersebut, dipilihlah desainer interior.

Sampai sini seharusnya anda sudah ada bayangan mengenai HTML dan CSS.


Pengenalan CSS

CSS adalah kumpulan kode untuk mendefinisikan desain dari bahasa markup. Markup yang dimaksud adalah relasi antara CSS dan HTML yang sangat dekat. Dengan CSS, desain website yang di bangun menggunakan HTML akan menjadi lebih menarik dan bervariatif.

Jika di definisikan secara bebas, CSS merupakan kumpulan kode untuk mendesain atau mempercantik tampilan halaman website. Dengan kata lain, dengan memanfaatkan CSS kita bisa mengubah desain standar yang di hasilkan oleh HTML menjadi bervariasi sesuai dengan keinginan kita yang lebih kompleks lagi.

Sebagai contoh, kita bisa merubah warna teks pada sebuah tag <p> pada HTML dimana jika kita hanya mengandalkan HTML, hal ini tidak bisa dilakukan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menulis Teks Dengan HTML</title>
</head>
<body>
    <p><font color="salmon">Tulisan ini berwarna salmon</font></p>
    <p><font color="skyblue">Tulisan ini berwarna skyblue</font></p>
    <p><font color="limegreen">Tulisan ini berwarna limegreen</font></p>
</body>
</html>

contoh merubah warna teks

Script HTML diatas menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf berganti warna menjadi salmon, skyblue, dan limegreen. Sejauh ini, kita tidak menemukan sesuatu yang mengarah pada alasan mengapa kita menggunakan CSS.

Tapi, jika di dalam website tersebut mengandung tulisan dalam jumlah banyak, tersusun dari ratusan paragraf, dan kita ingin mengubah seluruh warna menjadi warna misalnya darkblue. Maka, kita harus mengganti kode HTML yang tak terhitung banyaknya. Belum lagi jika tulisan yang ingin diganti warnanya itu ada di beberapa file yang berbeda.

Kalau sudah begini, kita akan membutuhkan CSS karena dalam kondisi seperti ini CSS bisa digunakan untuk memisahkan “kode-kode yang mengurusi tampilan” dan “kode-kode yang mengurusi konten/isi website tersebut”.

Kode HTML di atas, jika sudah ditambahkan dengan CSS akan tampak seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menulis Teks Dengan HTML</title>
</head>
<body>
    <style>
        .warna {
            color: darkblue;
        }
    </style>
    <p><font class="warna">Tulisan ini berwarna salmon</font></p>
    <p><font class="warna">Tulisan ini berwarna skyblue</font></p>
    <p><font class="warna">Tulisan ini berwarna limegreen</font></p>
</body>
</html>

contoh merubah warna teks dengan css

Pada contoh CSS diatas, tag <font> tetap digunakan, tapi dengan memanfaatkan atribut class. Nilai dari atribut class sendiri adalah warna yang di spesifikasikan sebagai bagian dari CSS. Atribut class berguna untuk memasukkan kode CSS pada tag <style> yang bisa ditemukan pada bagian <body>.

Jadi, jika kita ingin mengubah seluruh warna menjadi warna lain, misalnya coklat, maka kita tinggal mengubah isi dari CSS color: darkblue; menjadi color: brown;. Dengan begitu, seluruh tag yang memiliki class="warna" akan otomatis berubah menjadi coklat.


Nah jadi seperti itu lah pengenalan CSS, intinya HTML digunakan untuk membuat struktur website, sedangkan CSS digunakan untuk mendesain suatu website agar tampilannya menjadi indah untuk di lihat.

Dibawah ini merupakan semua list dari proses part Belajar CSS
  • Tutorial CSS Part 1: Pengenalan CSS
Default image
Brian Harris
Seseorang yang tertarik dengan Dunia IT terutama di bidang Web Programming dan ingin menjadi Full-stack Developer.

Leave a Reply