HTML Styles (CSS)

❮ Previous Next ❯

Bab 1: Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen HTML. Jika HTML adalah kerangka tulang manusia, maka CSS adalah kulit, pakaian, dan riasannya.

Dengan CSS, Anda dapat mengontrol warna, font, posisi, ukuran, dan bahkan animasi dari setiap elemen di website Anda. CSS memungkinkan kita memisahkan konten (HTML) dari desain (CSS), yang merupakan prinsip dasar pengembangan web modern.

💡 Fakta CSS:

Satu file CSS dapat digunakan untuk mengatur tampilan ribuan halaman HTML sekaligus. Inilah mengapa CSS disebut sangat efisien.

Bab 2: Struktur Syntax CSS

Aturan CSS terdiri dari Selector dan Declaration Block.

Selector

Menunjuk elemen HTML mana yang ingin diubah gayanya (misal: h1, p, atau div).

Property

Aspek apa yang ingin diubah (misal: color, font-size).

Value

Nilai dari properti tersebut (misal: blue, 20px).

Rumus Dasar:

selector {
  property: value;
  property: value;
}

Bab 3: Tiga Cara Menyisipkan CSS

Ada tiga metode untuk menambahkan CSS ke dalam dokumen HTML. Seorang developer harus tahu kapan menggunakan masing-masing metode ini.

1. Inline CSS (Dalam Baris)

Ditulis langsung di dalam tag HTML menggunakan atribut style. Metode ini hanya digunakan untuk perubahan kecil dan spesifik pada satu elemen saja.

<h1 style="color:blue; text-align:center;">Judul Inline</h1>

2. Internal CSS (Dalam Kepala)

Ditulis di dalam bagian <head> menggunakan tag <style>. Metode ini efektif jika satu halaman memiliki desain unik yang berbeda dari halaman lain.

<head>
  <style>
    body { background-color: black; }
    h1 { color: white; }
  </style>
</head>

3. External CSS (File Terpisah)

Ini adalah metode standar profesional. Kode CSS disimpan dalam file terpisah berekstensi .css, lalu dipanggil menggunakan tag <link>. Dengan cara ini, Anda bisa mengubah tampilan seluruh website hanya dengan mengedit satu file.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Bab 4: Properti CSS Paling Umum

Berikut adalah beberapa properti CSS yang wajib dikuasai oleh pemula:

Bab 5: CSS Border (Garis Tepi)

Properti border digunakan untuk memberikan bingkai pada elemen. Anda bisa mengatur ketebalan, gaya garis, dan warnanya.

<style>
  p {
    border: 2px solid #00ff9d;
    padding: 10px;
  }
</style>

<p>Paragraf dengan border hijau neon.</p>

Bab 6: CSS Padding vs Margin

Dua properti ini sering tertukar. Ingat prinsip ini:

Padding (Bantalan)

Ruang kosong di DALAM border. Padding membuat elemen terlihat lebih "gemuk" atau lega isinya.

Margin (Jarak)

Ruang kosong di LUAR border. Margin mendorong elemen lain menjauh.

⚡ Proyek Kilat: Mendesain Kartu Profil

Misi Anda adalah membuat kartu profil sederhana menggunakan Internal CSS. Kartu ini harus memiliki border, warna background, dan teks yang rapi.

🎯 Target Misi:

  • ✅ Di dalam <style>, buat selector untuk div dengan:
    • Background: #1e293b
    • Border: 1px solid #00ff9d
    • Padding: 20px
    • Text-align: center
  • ✅ Di dalam body, buat struktur HTML: <div> berisi <h2> (Nama) dan <p> (Deskripsi).

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

CSS memungkinkan kita mengubah tampilan, tapi bagaimana cara kita menghubungkan satu halaman ke halaman lain? Di bab selanjutnya, kita akan membahas elemen paling fundamental dari "Web": Links.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke HTML Links »
❮ Previous Next: HTML Links ❯