CSS (Cascading Style Sheets) adalah bahasa styling yang digunakan untuk mengatur tampilan halaman web yang ditulis dengan HTML. CSS memungkinkan Anda mengontrol warna, font, layout, dan aspek visual lainnya dari sebuah website. Tutorial CSS dasar ini ditujukan untuk pemula yang ingin mempelajari cara membuat website yang menarik dan responsif.
Apa itu CSS dan Mengapa Penting? (Pengenalan CSS)
Sebelum kita mulai membahas kode, mari kita pahami dulu apa itu CSS dan mengapa ini sangat penting dalam pengembangan web. Bayangkan HTML sebagai kerangka bangunan. HTML menyediakan struktur dasar website, seperti heading, paragraf, gambar, dan tautan. Namun, HTML sendiri tidak memberikan instruksi bagaimana elemen-elemen ini harus terlihat. Di sinilah CSS berperan.
CSS memungkinkan Anda untuk "mendandani" kerangka HTML tersebut. Anda bisa menentukan warna latar belakang, jenis huruf, ukuran teks, margin, padding, dan banyak lagi. Tanpa CSS, website Anda akan terlihat sangat sederhana dan membosankan. Dengan CSS, Anda dapat membuat website yang menarik, profesional, dan sesuai dengan merek Anda.
Lebih jauh lagi, CSS memungkinkan Anda untuk memisahkan konten dari presentasi. Ini berarti Anda dapat mengubah tampilan website tanpa harus mengubah kode HTML-nya. Hal ini membuat pemeliharaan website menjadi lebih mudah dan efisien.
Cara Menambahkan CSS ke HTML (Metode Penulisan CSS)
Ada tiga cara utama untuk menambahkan CSS ke dokumen HTML:
Inline CSS: Menambahkan style langsung ke elemen HTML menggunakan atribut
style. Metode ini kurang disarankan karena membuat kode HTML menjadi berantakan dan sulit dipelihara.Contoh:
<h1 style="color: blue; text-align: center;">Judul Halaman</h1>Internal CSS: Menambahkan style di dalam tag
<style>di bagian<head>dokumen HTML. Metode ini lebih baik daripada inline CSS, tetapi masih kurang ideal untuk website yang besar.Contoh:
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; text-align: center; } p { font-family: arial; } </style> </head> <body> <h1>Judul Halaman</h1> <p>Ini adalah paragraf.</p> </body> </html>External CSS: Menambahkan style di file CSS terpisah (dengan ekstensi
.css) dan menautkannya ke dokumen HTML menggunakan tag<link>. Ini adalah metode yang paling direkomendasikan karena membuat kode HTML dan CSS menjadi lebih terorganisir dan mudah dipelihara.Contoh:
Buat file
style.cssdengan isi sebagai berikut:h1 { color: blue; text-align: center; } p { font-family: arial; }Kemudian, tautkan file
style.csske dokumen HTML Anda:<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Judul Halaman</h1> <p>Ini adalah paragraf.</p> </body> </html>
Dalam tutorial ini, kita akan fokus menggunakan metode external CSS karena merupakan praktik terbaik dalam pengembangan web modern.
Sintaks Dasar CSS (Struktur Kode CSS)
Sintaks CSS terdiri dari selector, property, dan value.
- Selector: Menentukan elemen HTML mana yang akan diberi style.
- Property: Menentukan aspek visual apa yang ingin diubah (misalnya, warna, font, ukuran).
- Value: Menentukan nilai untuk property tersebut.
Contoh:
h1 {
color: blue; /* Property: color, Value: blue */
text-align: center; /* Property: text-align, Value: center */
}
Dalam contoh ini:
h1adalah selector (memilih semua elemen<h1>)colordantext-alignadalah propertiesbluedancenteradalah values
Setiap deklarasi CSS diapit oleh kurung kurawal {} dan setiap property dan value dipisahkan oleh titik dua :. Setiap deklarasi diakhiri dengan titik koma ;.
Selector CSS: Memilih Elemen HTML dengan Tepat (Jenis-Jenis Selector CSS)
Ada berbagai jenis selector CSS yang dapat Anda gunakan untuk memilih elemen HTML yang berbeda:
Element Selector: Memilih elemen berdasarkan nama tag HTML (misalnya,
h1,p,a).Contoh:
p { /* Memilih semua elemen <p> */ font-size: 16px; }Class Selector: Memilih elemen berdasarkan atribut
class. Class selector diawali dengan tanda titik..Contoh:
```css .highlight { /* Memilih semua elemen dengan class=
