Hari 3: Display, Posisi & Mini Proyek CSS

Memahami display dan positioning dasar, lalu membangun kartu profil sebagai mini proyek penutup 3 Hari Paham CSS.

Pengantar

Hari terakhir 3 Hari Paham CSS. Kita rapikan display, sedikit position, lalu gabungkan jadi kartu profil.

Setelah ini, lanjut natural ke series responsive (flex, grid, dll).

Display

Nilai yang sering dipakai:

block — penuh lebar, turun baris (div, p, h1)
inline — mengalir di teks (span, a)
inline-block — inline tapi bisa width/height
none — disembunyikan
flex / grid — layout modern (dibahas di series responsive)

Block vs inline vs inline-block

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
.block {
  display: block;
  background: #ccfbf1;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}
.inline {
  display: inline;
  background: #fef3c7;
  padding: 0.25rem 0.4rem;
}
.ib {
  display: inline-block;
  width: 120px;
  background: #e0e7ff;
  padding: 0.5rem;
  margin-right: 0.5rem;
}
</style>
<div class="block">Block 1</div>
<div class="block">Block 2</div>
<p>
Teks
<span class="inline">inline</span>
lanjut teks.
</p>
<div class="ib">IB 1</div>
<div class="ib">IB 2</div>

Preview

Position (pengenalan)

static — default
relative — geser relatif dari posisi normal (top/left)
absolute — relatif ke ancestor position bukan static
fixed — menempel viewport
sticky — hybrid scroll

Badge absolute di kartu

<style>
body { font-family: system-ui, sans-serif; margin: 1.5rem; }
.card {
  position: relative;
  width: 220px;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #0f766e;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
</style>
<div class="card">
<span class="badge">Baru</span>
<strong>Kartu produk</strong>
<p>Badge memakai position absolute.</p>
</div>

Preview

Mini proyek: kartu profil

Personalisasikan nama, warna, dan jarak.

Kartu profil — proyek akhir

<!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>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: system-ui, sans-serif;
      background: linear-gradient(160deg, #ecfeff, #f8fafc);
    }
    .card {
      width: min(100% - 2rem, 320px);
      background: white;
      border-radius: 1.25rem;
      padding: 1.5rem;
      border: 1px solid #e2e8f0;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      text-align: center;
    }
    .avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #0f766e;
    }
    h1 {
      margin: 0.75rem 0 0.25rem;
      font-size: 1.35rem;
      color: #0f172a;
    }
    .role {
      margin: 0;
      color: #0f766e;
      font-weight: 600;
      font-size: 0.95rem;
    }
    .bio {
      color: #475569;
      line-height: 1.55;
      font-size: 0.95rem;
    }
    .btn {
      display: inline-block;
      margin-top: 0.5rem;
      padding: 0.55rem 1rem;
      border-radius: 999px;
      background: #0f766e;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
    }
    .btn:hover { background: #115e59; }
  </style>
</head>
<body>
  <article class="card">
    <img
      class="avatar"
      src="https://placehold.co/88x88/png?text=A"
      alt="Avatar"
    />
    <h1>Nama Kamu</h1>
    <p class="role">Frontend learner</p>
    <p class="bio">
      Lulus 3 Hari Paham CSS. Siap lanjut ke layout responsive.
    </p>
    <a class="btn" href="#kontak">Hubungi</a>
  </article>
</body>
</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>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: system-ui, sans-serif;
      background: linear-gradient(160deg, #ecfeff, #f8fafc);
    }
    .card {
      width: min(100% - 2rem, 320px);
      background: white;
      border-radius: 1.25rem;
      padding: 1.5rem;
      border: 1px solid #e2e8f0;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      text-align: center;
    }
    .avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #0f766e;
    }
    h1 {
      margin: 0.75rem 0 0.25rem;
      font-size: 1.35rem;
      color: #0f172a;
    }
    .role {
      margin: 0;
      color: #0f766e;
      font-weight: 600;
      font-size: 0.95rem;
    }
    .bio {
      color: #475569;
      line-height: 1.55;
      font-size: 0.95rem;
    }
    .btn {
      display: inline-block;
      margin-top: 0.5rem;
      padding: 0.55rem 1rem;
      border-radius: 999px;
      background: #0f766e;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
    }
    .btn:hover { background: #115e59; }
  </style>
</head>
<body>
  <article class="card">
    <img
      class="avatar"
      src="https://placehold.co/88x88/png?text=A"
      alt="Avatar"
    />
    <h1>Nama Kamu</h1>
    <p class="role">Frontend learner</p>
    <p class="bio">
      Lulus 3 Hari Paham CSS. Siap lanjut ke layout responsive.
    </p>
    <a class="btn" href="#kontak">Hubungi</a>
  </article>
</body>
</html>

Preview

Kuis penutup

Nilai display mana yang menyembunyikan elemen dari layout?

Untuk menaruh badge di sudut kartu, kombinasi yang umum adalah?

Checklist

0/4 selesai

Membedakan block, inline, inline-block
Mencoba badge absolute
Mempersonalisasi kartu profil
Siap lanjut series responsive

Lanjut belajar

Series berikutnya: 5 Hari Responsive Web (flex, grid, image, table)
Mulai di Hari 1: Fondasi Responsive

Hari 3: Display, Posisi & Mini Proyek CSS

Pengantar

Display

Position (pengenalan)

Mini proyek: kartu profil

Kuis penutup

Checklist

Lanjut belajar

Komentar