Belajar CSS Dasar untuk Pemula

Setelah menyelesaikan Belajar HTML Part 1–10, kamu sudah memahami struktur website. Sekarang saatnya masuk ke tahap berikutnya: CSS (Cascading Style Sheets).

CSS digunakan untuk:

Mengatur tampilan HTML
Mengubah warna, font, dan layout
Membuat website terlihat profesional

Sebelum melanjutkan pembahasan tentang Pengenalan CSS dan Cara Kerjanya, sebaiknya Anda memahami terlebih dahulu dasar-dasar teknologi web seperti tag HTML, atribut HTML, serta bahasa pemrograman JavaScript yang sering digunakan bersama CSS dalam pengembangan website.

Daftar Isi

Apa Itu CSS?

CSS adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak elemen HTML pada sebuah halaman web. CSS menentukan bagaimana elemen ditampilkan di layar, mulai dari warna, ukuran teks, jenis font, jarak antar elemen, posisi, hingga tata letak keseluruhan halaman.

Jika HTML adalah kerangka atau struktur dasar sebuah bangunan, maka CSS adalah desain interior dan eksteriornya. HTML berfungsi menyusun konten seperti judul, paragraf, gambar, dan tombol, sedangkan CSS memperindah serta mengatur bagaimana semua elemen tersebut terlihat dan tersusun.

Dengan CSS, kita dapat memisahkan struktur (HTML) dan tampilan (CSS). Hal ini membuat kode lebih rapi, mudah dikelola, dan efisien. Selain itu, satu file CSS dapat digunakan untuk mengatur tampilan banyak halaman sekaligus, sehingga mempermudah proses pengembangan dan pemeliharaan website.

CSS juga mendukung berbagai fitur modern seperti layout fleksibel (Flexbox), Grid, animasi, serta responsive design yang memungkinkan tampilan website menyesuaikan ukuran layar perangkat, baik itu desktop, tablet, maupun smartphone.

Singkatnya, CSS berperan penting dalam menciptakan website yang tidak hanya berfungsi dengan baik, tetapi juga menarik, nyaman digunakan, dan terlihat profesional.

Kenapa CSS Penting?

CSS penting karena berperan dalam mengatur tampilan dan kenyamanan sebuah website. Tanpa CSS, halaman web hanya akan terlihat seperti teks dan elemen yang tersusun secara polos tanpa warna, tanpa tata letak yang menarik, dan tanpa desain yang rapi.

Berikut beberapa alasan mengapa CSS sangat penting:

1. Membuat Tampilan Lebih Menarik

CSS memungkinkan kita mengatur warna, font, ukuran teks, jarak, background, hingga efek visual. Dengan desain yang baik, website terlihat lebih profesional dan enak dilihat.

2. Meningkatkan Pengalaman Pengguna (User Experience)

Tata letak yang rapi dan responsif membuat pengunjung lebih nyaman saat membaca atau menjelajahi website. CSS membantu memastikan elemen tersusun dengan baik di berbagai ukuran layar.

3. Memisahkan Struktur dan Desain

Dengan memisahkan HTML (struktur) dan CSS (tampilan), kode menjadi lebih bersih, mudah dibaca, dan lebih mudah dikelola. Ini juga mempermudah pengembangan jangka panjang.

4. Mendukung Desain Responsif

CSS memungkinkan website menyesuaikan tampilannya di berbagai perangkat seperti laptop, tablet, dan smartphone. Hal ini sangat penting karena saat ini banyak pengguna mengakses internet melalui perangkat mobile.

5. Membuat Website Lebih Interaktif

Dengan fitur seperti transisi, animasi, dan efek hover, CSS membuat website terasa lebih hidup dan tidak kaku.

Singkatnya, CSS penting karena membantu menciptakan website yang tidak hanya berfungsi dengan baik, tetapi juga menarik, nyaman digunakan, dan mampu memberikan pengalaman terbaik bagi pengguna.

Tanpa CSS:

Website terlihat polos
Sulit dibaca
Tidak menarik pengguna

Dengan CSS:

Tampilan rapi
User experience meningkat
Website terlihat modern

Cara Kerja CSS

CSS bekerja dengan memilih elemen HTML lalu menerapkan aturan gaya.

selector {
  property: value;
}

Contoh:

p {
  color: blue;
  font-size: 18px;
}

Contoh HTML Lengkap: Cara Kerja CSS

<!DOCTYPE html>
<html>
<head>
  <title>Cara Kerja CSS</title>
</head>
<body>

  <h1>Judul</h1>
  <p>Ini paragraf pertama.</p>
  <p>Ini paragraf kedua.</p>

</body>
</html>

Artinya:

p → elemen HTML
color → properti
blue → nilai
18px → nilai

Hasilnya

Semua <p> → teks biru
Ukuran font → 18px
<h1> tidak berubah (karena tidak dipilih oleh selector)

Cara Menambahkan CSS ke HTML

Inline CSS

Inline CSS adalah CSS yang ditulis langsung di dalam tag HTML menggunakan atribut style.

Contoh HTML Lengkap: Inline CSS

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>
<body>

  <h1 style="color:green;">Judul Hijau</h1>
  <p style="color:red;">Teks merah</p>
  <p style="font-size:20px;">Teks lebih besar</p>

</body>
</html>

Tidak disarankan untuk proyek besar.

Internal CSS

Internal CSS adalah CSS yang ditulis di dalam file HTML, tepatnya di dalam tag <style> yang diletakkan di bagian <head>.

Struktur Dasar

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

Contoh HTML Lengkap: Internal CSS

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: blue;
    }

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

  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf pertama.</p>
  <p>Ini adalah paragraf kedua.</p>

</body>
</html>

Penjelasan

CSS ditulis di dalam <style>
Berlaku untuk seluruh halaman tersebut
Tidak perlu atribut style di setiap elemen
Lebih rapi dibanding Inline CSS

Cocok untuk contoh kecil.

External CSS (Disarankan)

External CSS adalah CSS yang ditulis di file terpisah, lalu dihubungkan ke HTML menggunakan tag <link>.

Contoh HTML Lengkap: External CSS, File HTML (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Contoh External CSS</title>
  <!--link rel="stylesheet" href="style.css"-->
  <link rel="stylesheet" href="/example/css-part-1/style.css">
</head>
<body>

  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf dengan External CSS.</p>

</body>
</html>

Contoh CSS Lengkap: File CSS (style.css)


body {
  font-family: Arial, sans-serif;
  background-color: #f1f5f9;
}

h1 {
  color: blue;
}

p {
  color: green;
  font-size: 18px;
}

Kenapa External CSS Direkomendasikan?

Kode lebih rapi
Mudah dikelola
Bisa dipakai di banyak halaman
Loading lebih cepat (browser cache)
SEO-friendly
Standar industri

Hubungan CSS dengan SEO

CSS tidak langsung memengaruhi ranking, tapi sangat berpengaruh pada:

User experience
Readability
Core Web Vitals

CSS yang buruk bisa membuat:

Website lambat
Layout berantakan
User cepat keluar

Kesalahan Umum Pemula

Terlalu banyak inline CSS
Tidak pakai file terpisah
Menyalin CSS tanpa paham

Ringkasan CSS Part 1

CSS mengatur tampilan HTML
Selector memilih elemen
External CSS adalah best practice

Lanjutan Materi

Di CSS Part 2, kita akan membahas:

CSS Selector
Specificity
Prioritas aturan CSS

Lanjut ke: Belajar CSS Part 2

Belajar CSS Part 1: Pengenalan CSS & Cara Kerjanya