Belajar CSS Dasar: Styling Website agar Terlihat Profesional

Februari 23, 2026 - Durasi membaca: 3 menit

Pendahuluan

Setelah memahami struktur HTML, langkah berikutnya dalam dunia web development adalah belajar CSS. Jika HTML adalah kerangka rumah, maka CSS adalah cat, dekorasi, pencahayaan, dan desain interior yang membuatnya terlihat menarik.

Di tutorial ini, kamu akan belajar CSS dari nol hingga bisa membuat tampilan website terlihat profesional. Semua dijelaskan step-by-step agar mudah dipahami bahkan oleh pemula.

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen HTML seperti warna, ukuran teks, jarak, layout, hingga animasi.

Tanpa CSS, website hanya akan terlihat seperti teks hitam di atas background putih.

Contoh Tanpa CSS

  <h1>Halo Dunia</h1>
  <p>Belajar coding itu menyenangkan</p>

Hasilnya? Sangat sederhana dan membosankan.

Contoh Dengan CSS

  h1 {
    color: blue;
    font-size: 40px;
  }

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

Hasilnya langsung terlihat lebih menarik.

Cara Menambahkan CSS ke HTML

1. Inline CSS

  <h1 style="color: red;">Halo Dunia</h1>

Kekurangan: Tidak efisien untuk proyek besar.

2. Internal CSS

  <head>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>

3. External CSS (Rekomendasi)

Buat file style.css

  h1 {
    color: green;
  }

Lalu hubungkan ke HTML:

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

Metode ini paling profesional dan digunakan di hampir semua website modern.

Selector CSS Dasar

1. Selector Tag

  p {
    color: black;
  }

2. Selector Class

  .box {
    background: lightblue;
  }

HTML:

  <div class="box">Konten</div>

3. Selector ID

  #header {
    background: black;
    color: white;
  }

HTML:

  <div id="header">Header</div>

Properti CSS Penting untuk Pemula

1. Warna

  color: red;
  background-color: black;

2. Font

  font-size: 20px;
  font-family: Arial;
  font-weight: bold;

3. Margin & Padding

  margin: 20px;
  padding: 15px;

Margin = jarak luar
Padding = jarak dalam

Box Model (Konsep Wajib Dipahami)

Semua elemen HTML berbentuk kotak.

  width
  height
  padding
  border
  margin

Contoh:

  .card {
    width: 300px;
    padding: 20px;
    border: 2px solid gray;
    margin: 20px;
  }

Membuat Layout Sederhana

Contoh Card Modern

HTML:

  <div class="card">
    <h2>Judul Artikel</h2>
    <p>Isi artikel singkat...</p>
  </div>

CSS:

  .card {
    background: #1c2230;
    color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }

Hasilnya akan terlihat modern dan profesional.

Belajar Flexbox (Layout Modern)

Flexbox digunakan untuk membuat layout horizontal dengan mudah.

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

Properti penting:

display: flex;
justify-content
align-items
flex-direction

Responsive Design (Wajib di 2026)

Website harus bisa menyesuaikan layar HP.

  @media (max-width: 768px) {
    .card {
      width: 100%;
    }
  }

Ini membuat website tetap rapi di layar kecil.

Tips Agar CSS Terlihat Profesional

Gunakan warna konsisten
Jangan terlalu banyak font
Gunakan spacing yang rapi
Gunakan border-radius modern
Gunakan box-shadow secukupnya

Mini Project: Landing Page Sederhana

Gabungkan semua yang sudah dipelajari untuk membuat landing page sederhana.

  body {
    margin: 0;
    font-family: Arial;
    background: #101820;
    color: white;
  }

  header {
    padding: 20px;
    text-align: center;
  }

  button {
    background: cyan;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
  }

Sekarang kamu sudah bisa membuat tampilan website yang tidak terlihat seperti website tahun 2005.

Kesimpulan

CSS adalah kunci untuk membuat website terlihat profesional. Dengan memahami selector, box model, layout, dan responsive design, kamu sudah berada satu langkah lebih dekat menjadi Frontend Developer.

Langkah selanjutnya setelah menguasai CSS adalah belajar JavaScript agar website menjadi interaktif.