Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa standar untuk mendefinisikan gaya pada halaman web. Meskipun CSS lebih dikenal luas karena penerapannya dalam dokumen HTML, CSS dapat digunakan untuk mendefinisikan gaya pada format dokumen terstruktur apa pun (seperti XML misalnya).
Gaya diatur menggunakan properti CSS. Misalnya, Anda dapat mengatur properti font (ukuran, warna, gaya, dll.), gambar latar belakang, gaya border, dan banyak lagi.
Sejarah CSS
CSS telah mengalami beberapa perubahan besar sejak CSS level 1 menjadi rekomendasi W3C pada Desember 1996. CSS1 menjelaskan bahasa CSS serta model pemformatan visual sederhana. CSS2, yang menjadi rekomendasi W3C pada Mei 1998, dikembangkan berdasarkan CSS1 dan menambahkan dukungan untuk lembar gaya khusus media (misalnya, printer dan perangkat audio), font yang dapat diunduh, pemosisian elemen, dan tabel.
Saat tulisan ini dibuat, CSS3 masih dalam tahap pengembangan, dan mencakup fitur-fitur yang lebih canggih seperti animasi, gradien latar belakang, tata letak multi-kolom, gambar batas, dan masih banyak lagi.
HTML vs CSS
Sebenarnya ini bukan "HTML vs CSS". Faktanya, HTML dan CSS adalah sahabat karib! CSS adalah ekstensi pelengkap untuk HTML. Berikut fungsi masing-masing:
HTML
Tujuan HTML adalah untuk menyediakan struktur dan makna dokumen. Hal ini khususnya berlaku dengan diperkenalkannya HTML5. Anda menggunakan HTML untuk menentukan elemen apa saja yang akan ditampilkan di halaman (misalnya, judul, paragraf, tabel, gambar, dll.). Setiap elemen ini (beserta atribut dan nilainya) memiliki makna tertentu.
CSS
Anda menggunakan CSS untuk menentukan tampilan elemen-elemen HTML tersebut. Bukan hanya tampilannya, tetapi juga cara penyajiannya. Lagipula, Anda dapat menggunakan CSS untuk menyediakan gaya pada keluaran ucapan (misalnya, untuk pengguna yang menggunakan pembaca layar). Jadi, Anda dapat menulis dokumen HTML tanpa perlu memikirkan penyajiannya, lalu menggunakan CSS untuk menentukan bagaimana dokumen tersebut akan disajikan dalam konteks apa pun. Tidak hanya itu, Anda juga dapat mengubah CSS tanpa harus mengubah HTML. Dengan kata lain, Anda dapat "memasukkan" lembar gaya ke dalam dokumen HTML dan dokumen HTML tersebut akan langsung mengadopsi gaya lembar gaya tersebut.
Contoh
Sebelumnya
Berikut contoh yang hanya menggunakan HTML. Tanpa CSS.
<!DOCTYPE html> <html> <head> <title>Contoh</title> </head> <body> <main> <h1>Halaman HTML</h1> <p>Ini adalah halaman web dasar.</p> </main> </body> </html>
Setelah
Dalam contoh ini, kami menambahkan beberapa CSS.
<!DOCTYPE html>
<html>
<head>
<title>Contoh</title>
<style>
main {
width: 200px;
height: 200px;
padding: 10px;
background: beige;
}
h1 {
font-family: fantasy, cursive, serif;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: sans-serif;
color: orange;
}
</style>
</head>
<body>
<main>
<h1>Halaman HTML</h1>
<p>Ini adalah halaman web dasar.</p>
</main>
</body>
</html>Yang kami lakukan hanyalah menambahkan kode berikut ke contoh kedua:
<style>
main {
width: 200px;
height: 200px;
padding: 10px;
background: beige;
}
h1 {
font-family: fantasy, cursive, serif;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: sans-serif;
color: orange;
}
</style>Silakan lanjutkan dan "potong & tempel" tag <style> dan semua yang ada di antaranya dari contoh kedua ke contoh pertama untuk melihat pengaruhnya terhadap kedua contoh.
Jadi ya, Anda bisa membuat dokumen HTML tanpa CSS, tetapi kemungkinan besar akan terlihat seperti dibuat pada tahun 1995!
Selanjutnya, kita akan membahas sintaksis CSS.