Belajar Web Development

Dasar CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan halaman web. Kalau HTML adalah kerangka rumah, CSS adalah cat, dekorasi, dan tata letaknya.

Cara Menghubungkan CSS ke HTML

Ada 3 cara menggunakan CSS:

1. Inline Style (di dalam tag)

<p style="color: red; font-size: 20px;">Teks ini berwarna merah</p>

❌ Tidak direkomendasikan untuk project besar — susah dikelola.

2. Internal CSS (di dalam <head>)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

⚠️ Boleh untuk halaman kecil, tapi tidak ideal untuk banyak halaman.

3. External CSS (file terpisah) ✅

Buat file style.css terpisah, lalu hubungkan ke HTML:

<!-- Di file HTML -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
/* Di file style.css */
p {
    color: green;
    font-size: 16px;
}
Best Practice

Selalu gunakan External CSS (cara ke-3). Ini membuat kode lebih rapi, mudah dikelola, dan bisa dipakai di banyak halaman HTML sekaligus.

Anatomi CSS

Setiap aturan CSS terdiri dari 3 bagian:

selector {
    property: value;
}
/* Contoh nyata */
h1 {
    color: #333333;
    font-size: 32px;
    text-align: center;
}
  • Selector — elemen HTML yang mau di-style (h1)
  • Property — apa yang mau diubah (color, font-size)
  • Value — nilai baru (#333333, 32px)

Selector CSS

Selector Dasar

/* 1. Tag Selector — semua elemen dengan tag tersebut */
p {
    color: gray;
}

/* 2. Class Selector — elemen dengan class tertentu (pakai titik) */
.highlight {
    background-color: yellow;
}

/* 3. ID Selector — elemen dengan id tertentu (pakai pagar) */
#judul-utama {
    font-size: 40px;
}

Cara pakainya di HTML:

<h1 id="judul-utama">Judul</h1>
<p class="highlight">Teks yang di-highlight</p>
<p>Teks biasa</p>
Class vs ID
  • Class (.) — bisa dipakai di banyak elemen → class="highlight"
  • ID (#) — hanya boleh dipakai di satu elemen per halaman → id="judul-utama"

Gunakan class untuk styling, ID untuk identifikasi unik (misal untuk JavaScript nanti).

Selector Kombinasi

/* Semua <p> di dalam <article> */
article p {
    line-height: 1.8;
}

/* Semua elemen dengan class "btn" DAN class "primary" */
.btn.primary {
    background-color: blue;
    color: white;
}

/* <a> di dalam <nav> */
nav a {
    text-decoration: none;
    color: white;
}

Warna di CSS

/* Nama warna */
color: red;
color: blue;

/* Kode hex */
color: #FF0000;    /* merah */
color: #333333;    /* abu-abu gelap */
color: #FFFFFF;    /* putih */

/* RGB */
color: rgb(255, 0, 0);       /* merah */
color: rgb(51, 51, 51);      /* abu-abu gelap */

/* RGBA (dengan transparansi) */
color: rgba(0, 0, 0, 0.5);   /* hitam 50% transparan */

Typography (Font)

body {
    /* Jenis font */
    font-family: 'Arial', 'Helvetica', sans-serif;

    /* Ukuran font */
    font-size: 16px;

    /* Ketebalan font */
    font-weight: normal;    /* atau: bold, 100-900 */

    /* Jarak antar baris */
    line-height: 1.6;

    /* Warna teks */
    color: #333;
}

h1 {
    font-size: 2em;         /* 2x ukuran font parent */
    font-weight: bold;
    text-align: center;     /* rata tengah */
    text-transform: uppercase;  /* HURUF KAPITAL */
}

a {
    color: #0066cc;
    text-decoration: none;  /* hilangkan garis bawah */
}

a:hover {
    text-decoration: underline;  /* garis bawah saat di-hover */
}

:::tip Satuan di CSS

  • px — pixel (ukuran tetap)
  • em — relatif terhadap font-size parent
  • rem — relatif terhadap font-size root (<html>)
  • % — persentase dari parent
  • vh/vw — persentase dari tinggi/lebar viewport :::

Background

/* Warna background */
body {
    background-color: #f5f5f5;
}

/* Gambar background */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;             /* isi seluruh area */
    background-position: center;        /* posisi tengah */
    background-repeat: no-repeat;       /* jangan diulang */
}

/* Gradient */
.header {
    background: linear-gradient(to right, #667eea, #764ba2);
}

Border dan Rounded Corners

.card {
    border: 1px solid #ddd;             /* garis tepi */
    border-radius: 8px;                 /* sudut membulat */
}

/* Hanya border bawah */
.nav-item {
    border-bottom: 2px solid #0066cc;
}

/* Border bulat (lingkaran) */
.avatar {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Shadow (Bayangan)

/* Bayangan kotak */
.card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Bayangan teks */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Latihan: Styling Halaman Blog

Sebelumnya kita sudah membuat blog.html. Sekarang buat file blog-style.css dan hubungkan:

/* Reset dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* Header */
header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

nav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
}

nav a:hover {
    color: white;
    text-decoration: underline;
}

/* Main content */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Article cards */
article {
    background: white;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

article h2 {
    color: #667eea;
    margin-bottom: 5px;
}

article small {
    color: #999;
}

section {
    margin-top: 15px;
}

section h3 {
    color: #555;
    border-bottom: 2px solid #667eea;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Aside */
aside {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

aside h3 {
    color: #764ba2;
    margin-bottom: 10px;
}

aside ul {
    list-style: none;
}

aside a {
    color: #667eea;
    text-decoration: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #aaa;
    margin-top: 30px;
}

Tambahkan di <head> pada blog.html:

<link rel="stylesheet" href="blog-style.css">

Selanjutnya

Sekarang halaman kita sudah punya style yang menarik! Tapi masih berantakan layoutnya. Mari belajar Layout CSS → untuk mengatur tata letak halaman dengan Flexbox dan Grid.

❓ Error Umum Pemula

:::warning Sering Terjadi!

  1. Lupa Titik Koma (;): 
    color: red  /* Lupa titik koma! */
font-size: 16px;
    Akibatnya, properti di bawahnya (font-size) tidak akan terbaca oleh browser.
  2. Salah Memanggil Selector (Titik vs Pagar): Membuat class di HTML <div class="kotak"> tapi di CSS memanggilnya pakai pagar #kotak (seharusnya titik .kotak).
  3. CSS Tidak Berubah (Masalah Cache): Sudah mengedit CSS tapi di browser tampilannya tidak berubah sama sekali? Ini karena browser sering menyimpan "Cache" untuk mempercepat loading. Solusi: Tekan Ctrl + Shift + R (Windows) atau Cmd + Shift + R (Mac) untuk melakukan Hard Refresh. :::