Halo kawan Maya!
Pada artikel sebelumnya, kita sudah berkenalan dengan HTML yang bertugas untuk membangun struktur atau kerangka sebuah website. Nah, jika kawan Maya bayangkan HTML itu adalah kerangka sebuah rumah, maka tentu rumah tersebut masih terlihat polos dan biasa saja, bukan?
Di sinilah kita akan berkenalan dengan sahabat baiknya HTML, yaitu CSS!
CSS ibarat cat, perabotan, taman, dan semua dekorasi yang membuat rumah kita (website) menjadi terlihat indah, menarik, dan nyaman untuk dikunjungi. Dengan CSS, kita bisa mengatur warna tulisan, jenis huruf, jarak antar elemen, dan masih banyak lagi.
Yuk, kita mulai petualangan kita di dunia CSS!
Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Secara sederhana, CSS adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah dokumen yang ditulis dalam bahasa markup, seperti HTML.
Dengan memisahkan antara struktur (HTML) dan tampilan (CSS), pekerjaan kita sebagai pengembang web menjadi jauh lebih mudah dan rapi. Kawan Maya bisa mengubah seluruh tampilan website hanya dengan mengubah beberapa baris di file CSS, tanpa perlu menyentuh file HTML-nya sama sekali. Keren, kan?
Tiga Cara Menggunakan CSS
Ada tiga cara yang bisa kawan Maya gunakan untuk menambahkan CSS ke dalam dokumen HTML. Maya akan jelaskan satu per satu.
1. Inline CSS (Gaya di Dalam Tag)
Cara ini adalah dengan menambahkan atribut style langsung di dalam tag HTML yang ingin diubah. Cara ini biasanya digunakan untuk perubahan yang sangat spesifik pada satu elemen saja.
Contoh:
<h1 style="color:blue; text-align:center;">Ini Judul Berwarna Biru dan di Tengah</h1> <p style="color:green;">Ini adalah paragraf dengan tulisan berwarna hijau.</p>
Hasil:
<h1 style=”color:blue; text-align:center;”>Ini Judul Berwarna Biru dan di Tengah</h1> <p style=”color:green;”>Ini adalah paragraf dengan tulisan berwarna hijau.</p>
Meskipun cepat, Maya tidak terlalu menyarankan cara ini untuk digunakan pada banyak elemen karena akan membuat kode HTML menjadi berantakan dan sulit dikelola.
2. Internal CSS (Gaya di Dalam Halaman)
Dengan cara ini, kawan Maya menempatkan semua kode CSS di dalam tag <style> yang diletakkan di bagian <head> pada dokumen HTML. Cara ini cocok jika kawan Maya ingin menerapkan gaya yang sama untuk satu halaman web saja.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<style>
body {
background-color: #f0f0f0; /* Warna latar belakang abu-abu muda */
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: verdana;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Selamat Datang di Karyamaya.com</h1>
<p>Ini adalah paragraf yang ditata menggunakan Internal CSS.</p>
</body>
</html>
Hasil: Halaman akan memiliki latar belakang abu-abu muda, judul berwarna biru tua dan di tengah, serta paragraf dengan font Verdana.
3. External CSS (Gaya di File Terpisah)
Ini adalah cara yang paling direkomendasikan oleh Maya dan para profesional! Kawan Maya membuat sebuah file terpisah dengan ekstensi .css (misalnya style.css), lalu menghubungkannya ke file HTML menggunakan tag <link> di dalam bagian <head>.
Contoh:
Pertama, buat file index.html:
<!DOCTYPE html> <html> <head> <title>Contoh External CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Selamat Datang di Karyamaya.com</h1> <p>Halaman ini ditata dengan file CSS terpisah.</p> </body> </html>
Kedua, buat file style.css di folder yang sama:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: arial;
font-size: 18px;
}
Hasil: Halaman akan memiliki latar belakang biru muda, judul berwarna putih dan di tengah, serta paragraf dengan font Arial yang lebih besar.
Dengan cara ini, file style.css yang sama bisa digunakan oleh banyak halaman HTML. Jadi, jika kawan Maya ingin mengubah warna latar semua halaman, cukup ubah satu baris di file style.css! Sangat efisien!
Bagaimana, kawan Maya? Tidak sulit, kan? Ini adalah langkah pertama untuk menjadi seorang penata website yang andal.
Di artikel selanjutnya, Maya akan mengajak kawan Maya untuk menyelami lebih dalam tentang “selector” dan “property” yang ada di CSS. Sampai jumpa!
