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.
CSS ditemukan pada tahun 1996 oleh Håkon Wium Lie dan Bert Bos, dan sejak itu menjadi salah satu teknologi web yang paling penting. Saat ini, hampir semua halaman web menggunakan CSS untuk mengatur tampilannya.
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>
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>
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.
Mengapa CSS penting dalam pengembangan web?
CSS sangat penting dalam pengembangan web karena memungkinkan developer atau web designer untuk memisahkan struktur dan konten halaman web dari tampilannya. Ini memungkinkan developer untuk membuat tampilan yang konsisten pada setiap halaman web, lebih mudah dalam pengelolaan tampilan web dan membuat halaman web lebih cepat dalam memuat konten.
Selain itu, CSS juga memungkinkan developer untuk membuat tampilan yang responsif dan mobile-friendly. Dengan menggunakan CSS, developer bisa mengatur tampilan halaman web agar dapat menyesuaikan dengan berbagai ukuran layar, seperti pada perangkat mobile, tablet, dan desktop.
Syntax CSS
Syntax CSS terdiri dari selector dan deklarasi, yang ditempatkan di dalam blok {}.
Selector adalah elemen atau kelas atau ID atau pseudo-class yang digunakan untuk memilih elemen HTML tertentu yang ingin diubah tampilannya. Contohnya, jika ingin mengubah tampilan semua elemen <h1>, kita dapat menggunakan selector seperti berikut:
h1 {
/* deklarasi di sini */
}
Deklarasi terdiri dari properti dan value, yang menentukan tampilan yang ingin diatur. Contohnya, jika ingin mengubah warna teks pada elemen <h1> menjadi merah, kita dapat menggunakan deklarasi seperti berikut:
h1 {
color: red;
}
Properti dan valuenya dipisahkan dengan titik dua (:), dan setiap deklarasi dipisahkan dengan tanda titik koma (;).
Selanjutnya, kita akan membahas cara memasukkan CSS ke dalam dokumen HTML.
Memasukkan CSS ke dalam dokumen HTML
Sebelumnya kita sudah mencoba secara singkat untuk memasukkan CSS ke dalam file HTML, tapi sekarang.. kita akan membahas cara-cara memasukkan ke dalam file HTML yang lebih rinci.
Ada tiga cara untuk memasukkan CSS ke dalam dokumen HTML, yaitu menggunakan inline styles, internal stylesheets, dan external stylesheets.
Menggunakan inline styles
Inline styles adalah cara untuk menambahkan CSS langsung ke dalam elemen HTML. Ini dilakukan dengan menambahkan atribut style ke dalam elemen HTML, yang berisi properti dan nilai yang ingin diatur.
Contohnya, jika ingin mengubah warna teks pada elemen <h1> menjadi merah dengan inline styles, kita dapat menambahkan atribut style seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Styles</title>
</head>
<body>
<h1 style="color: red;">Judul dengan Inline Styles</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
</body>
</html>
Pada contoh di atas, kita menambahkan atribut style pada elemen <h1> dan mengatur warna teksnya menjadi merah dengan menambahkan deklarasi color: red;. Kita juga dapat menambahkan deklarasi lain, seperti font-size, background-color, dan sebagainya.
Namun, penggunaan inline styles memiliki kelemahan karena sulit untuk diubah dan maintenance jika kita memiliki banyak elemen yang ingin diubah tampilannya. Oleh karena itu, cara yang lebih disarankan adalah dengan menggunakan internal atau external stylesheets.
Menggunakan internal stylesheets
Internal stylesheets adalah cara untuk menambahkan CSS ke dalam bagian head dari dokumen HTML. Ini dilakukan dengan menambahkan tag <style> di dalam tag head, dan menuliskan CSS di antara tag tersebut.
Contohnya, jika ingin mengubah warna teks pada elemen <h1> menjadi merah dengan internal stylesheet, kita dapat menambahkan tag <style> seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal Stylesheet</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Judul dengan Internal Stylesheet</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
</body>
</html>
Pada contoh di atas, kita menambahkan tag <style> di dalam tag head, dan menambahkan selector h1 dengan deklarasi color: red;. Kita juga dapat menambahkan selector dan deklarasi lain sesuai dengan kebutuhan.
Menggunakan external stylesheets
External stylesheets adalah cara yang paling disarankan untuk menambahkan CSS ke dalam dokumen HTML. Ini dilakukan dengan cara membuat file CSS terpisah dengan ekstensi .css, dan menambahkan tag <link> di dalam tag head dengan atribut href yang mengarah ke file CSS tersebut.
Contohnya, jika ingin mengubah warna teks pada elemen <h1> menjadi merah dengan external stylesheet, kita dapat membuat file style.css dengan isi sebagai berikut:
h1 {
color: red;
}
Kemudian, pada dokumen HTML, kita dapat menambahkan tag <link> seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh External Stylesheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Judul dengan External Stylesheet</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
</body>
</html>
Pada contoh di atas, kita menambahkan tag <link> di dalam tag head, dengan atribut href yang mengarah ke file style.css. Kita juga bisa menambahkan beberapa file CSS dengan menambahkan beberapa tag <link>.
Dengan menggunakan external stylesheets, kita dapat mengelola tampilan dari seluruh halaman web dengan lebih efisien, karena kita dapat mengubah tampilan semua elemen dengan mudah hanya dengan mengedit file CSS yang terpisah. Kita juga dapat menggunakan kembali file CSS yang sama untuk beberapa halaman web, sehingga membuat kode CSS menjadi lebih mudah dipelihara.
Pada tutorial ini, kita telah membahas apa itu CSS serta cara-cara singkat untuk memasukkan CSS ke dalam dokumen HTML, mulai dari penggunaan inline styles, internal stylesheets, hingga external stylesheets. Kita juga telah membahas keuntungan dan kelemahan dari masing-masing cara, serta perbedaan dari setiap cara tersebut.
Selanjutnya, kita akan membahas tentang selektor CSS, yaitu cara untuk memilih elemen mana yang akan diberi tampilan CSS.