Luhur Sutekno
Luhur Sutekno
PORTFOLIO
Kembali ke Artikel
Artificial Intelligence

Belajar CSS dari Nol Membuat Tampilan Website Lebih Menarik

Luhur Sutekno 28 Sep 2026
Belajar CSS dari Nol Membuat Tampilan Website Lebih Menarik

Pelajari dasar CSS untuk pemula, mulai dari cara menghubungkannya ke HTML, memahami selector dan jarak antar elemen, hingga membuat kartu profil sederhana.

Setelah membuat struktur halaman dengan HTML, langkah berikutnya adalah mengatur tampilannya dengan CSS. CSS (Cascading Style Sheets) digunakan untuk menentukan warna, ukuran teks, jarak, serta tata letak elemen pada halaman web.


Dalam tutorial ini, kita akan belajar konsep dasarnya sambil membuat satu komponen kartu profil.


1. Mengenal aturan dasar CSS

Sebuah aturan CSS terdiri dari selector dan deklarasi:

h1 {
color: #2563eb;
font-size: 32px;
}

h1 adalah selector yang memilih elemen HTML. color dan font-size adalah properti, sedangkan nilai setelah tanda titik dua menentukan tampilannya. Aturan di atas membuat semua judul <h1> berwarna biru dan berukuran 32 piksel.


2. Menghubungkan CSS ke HTML

Buat dua file dalam folder yang sama: index.html dan style.css. Tambahkan baris berikut di dalam bagian <head> pada file HTML:

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

Dengan file CSS terpisah, aturan tampilan lebih mudah dikelola dan dapat digunakan pada beberapa halaman.


3. Memilih elemen dengan selector

Ada tiga selector dasar yang sering digunakan:

p {
color: #475569;
}

.kartu {
background-color: white;
}

#judul-utama {
font-size: 36px;
}

Selector p memilih semua elemen <p>. Tanda titik pada .kartu memilih elemen dengan class="kartu", sedangkan tanda pagar pada #judul-utama memilih elemen dengan id="judul-utama". Untuk gaya yang ingin dipakai berulang, seperti desain beberapa kartu, gunakan class.


4. Memahami padding dan margin

Bayangkan setiap elemen HTML sebagai sebuah kotak. Isi kotak dikelilingi oleh padding, lalu border, kemudian margin.

  1. padding memberi jarak antara isi dan tepi kotak.
  2. margin memberi jarak antara kotak tersebut dan elemen lain.
  3. border membuat garis di sekeliling kotak.

Konsep ini dikenal sebagai CSS box model.


Contohnya:

.kartu {
padding: 24px;
border: 1px solid #e2e8f0;
margin: 20px;
}


5. Praktik: membuat kartu profil

Salin kode berikut ke file index.html:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kartu Profil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="kartu">
<div class="ikon">LS</div>
<h1>Luhur Sutekno</h1>
<p>Web developer yang senang berbagi pembelajaran teknologi.</p>
<a href="mailto:hello@luhursutekno.com">Hubungi Saya</a>
</main>
</body>
</html>

Lalu isi file style.css dengan:

* {
box-sizing: border-box;
}

body {
min-height: 100vh;
margin: 0;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
font-family: Arial, sans-serif;
color: #0f172a;
}

.kartu {
width: 100%;
max-width: 380px;
padding: 32px;
border-radius: 16px;
background: #ffffff;
text-align: center;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.ikon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin: 0 auto 20px;
border-radius: 50%;
background: #dbeafe;
color: #1d4ed8;
font-size: 24px;
font-weight: bold;
}

h1 {
margin: 0 0 12px;
font-size: 26px;
}

p {
margin: 0 0 24px;
color: #475569;
line-height: 1.6;
}

a {
display: inline-block;
padding: 12px 20px;
border-radius: 8px;
background: #2563eb;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

a:hover {
background: #1d4ed8;
}

Buka index.html di browser. Kamu akan melihat kartu profil berada di tengah halaman. Pada contoh ini, display: flex dipakai untuk mengatur posisi elemen; Flexbox memang dirancang untuk menyusun elemen dalam satu arah dan mengatur perataannya.


6. Coba ubah sendiri

Agar lebih cepat memahami CSS, coba lakukan tiga perubahan berikut:

  1. Ganti warna tombol melalui properti background pada selector a.
  2. Perbesar ruang di dalam kartu dengan mengubah padding pada .kartu.
  3. Ubah border-radius menjadi 0 dan lihat perubahan bentuk sudut kartu.

CSS paling mudah dipelajari dengan melihat langsung hasil setiap perubahan. Setelah nyaman dengan warna, teks, dan jarak, lanjutkan belajar Flexbox untuk menyusun bagian halaman yang lebih besar.


Referensi: MDN Web Docs – CSS Styling Basics dan MDN Web Docs – Flexbox.

Tags: #css
Kembali ke Artikel