Web Programming · Praktikum 03
Kembali ke slideHasil akhir

PERTEMUAN 03 · CSS DASAR

Memberi gaya pada proyek profil

Coba dua cara CSS secara terpisah, lalu lanjutkan proyek Pertemuan 02 dengan satu stylesheet.

YANG AKAN DIPELAJARI

Property CSS dalam praktikum ini

Pengaturan tampilan pada CSS disebut property. Berikut tujuh property yang akan digunakan secara bertahap.

color
Mengatur warna teks. Tahap 01–04
background-color
Mengatur warna latar elemen. Tahap 04
font-family
Memilih jenis font dan font penggantinya. Tahap 05
font-size
Mengatur ukuran teks. Tahap 05
font-weight
Mengatur ketebalan teks. Tahap 05
text-align
Mengatur perataan teks: kiri, tengah, kanan, atau rata kiri-kanan. Tahap 06
line-height
Mengatur jarak antarbaris teks. Tahap 06

Total 7 property, digunakan kembali saat mempelajari class, ID, cascade, dan DevTools pada tahap 07–10.

Bedakan: style, class, dan id adalah atribut HTML, bukan property CSS. Praktikum juga membahas inline, internal, external CSS, serta selector tag, class, dan ID.

Tahap 01: inline.html → tahap 02: internal.html → tahap 03–10: index.html + style.css. Semua file berada di folder proyek P02. Foto tetap di assets/images/foto.jpg. Simpan dan refresh setiap tahap; sesuaikan identitas sendiri.

PRAKTIKUM 01

Inline CSS pada Heading

Langkah kerja

File: inline.html.

  1. Buat inline.html di folder proyek P02; jangan mengubah index.html.
  2. Tambahkan atribut style pada h1 seperti contoh.
  3. Ganti Nama Mahasiswa dengan nama sendiri, simpan, lalu buka file ini di browser.

Kode yang ditambahkan atau diubah

inline.html · atribut pada h1

<h1 style="color: maroon;">Nama Mahasiswa</h1>

Atribut style berlaku pada elemen yang diberi atribut tersebut. index.html hasil P02 tetap utuh.

Cek hasil: h1 berwarna maroon; paragraf tetap memakai warna bawaan.

inline.html — kode lengkap sementara
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Percobaan Inline CSS</title>
</head>
<body>
  <!-- DITAMBAHKAN: atribut style pada h1 -->
  <h1 style="color: maroon;">Nama Mahasiswa</h1>
  <p>Saya sedang belajar CSS.</p>
</body>
</html>

Sudah selesai? Coba mengganti warna, amati hasilnya, lalu kembalikan ke contoh.

Tahap berikutnya →

PRAKTIKUM 02

Internal CSS

Langkah kerja

File: internal.html.

  1. Buat internal.html di folder proyek P02; jangan mengubah index.html.
  2. Tambahkan elemen style pada head dan tulis aturan untuk h1 serta p.
  3. Ganti Nama Mahasiswa dengan nama sendiri, simpan, lalu buka file ini di browser.

Kode yang ditambahkan atau diubah

internal.html · di dalam head

<style>
  h1 { color: maroon; }
  p { color: navy; }
</style>

Aturan pada head hanya berlaku di internal.html. inline.html tetap disimpan sebagai pembanding.

Cek hasil: h1 berwarna maroon dan paragraf navy.

internal.html — kode lengkap sementara
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Percobaan Internal CSS</title>
  <!-- DITAMBAHKAN: aturan internal CSS -->
  <style>
    h1 { color: maroon; }
    p { color: navy; }
  </style>
</head>
<body>
  <h1>Nama Mahasiswa</h1>
  <p>Saya sedang belajar CSS.</p>
</body>
</html>

Sudah selesai? Coba mengganti warna, amati hasilnya, lalu kembalikan ke contoh.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 03

External CSS pada Satu File style.css

Langkah kerja

File: index.html dan style.css.

  1. Buat style.css sejajar dengan index.html di folder proyek yang sama.
  2. Salin aturan h1 dan p dari internal.html ke style.css, tanpa tag style.
  3. Buka index.html hasil P02. Biarkan inline.html dan internal.html tetap sebagai percobaan.
  4. Tambahkan link rel="stylesheet" href="style.css" di head.
  5. Simpan kedua file dan refresh browser. Warna h1 dan p pada proyek sekarang mengikuti style.css.

Kode yang ditambahkan atau diubah

index.html · di dalam head

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

style.css · file baru

h1 { color: maroon; }
p { color: navy; }

Mulai tahap ini semua aturan visual dikelola pada style.css yang sama. Tidak perlu membuat warna.css atau font.css.

Cek hasil: CSS tetap bekerja melalui style.css; index.html memakai external CSS; dua file percobaan tetap terpisah.

index.html — kode lengkap sementara
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <!-- DITAMBAHKAN PADA TAHAP 03: style.css sejajar dengan index.html -->
  <link rel="stylesheet" href="style.css">
  <!-- AKHIR TAMBAHAN TAHAP 03 -->
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <p>
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li>Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>
style.css — kode lengkap sementara
/* DITAMBAHKAN PADA TAHAP 03: aturan disalin dari internal.html */
h1 {
  color: maroon;
}

p {
  color: navy;
}

Sudah selesai? Ubah warna h1 hanya dari style.css, amati hasil, lalu kembalikan ke maroon.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 04

Selector Tag, Warna Teks, dan Latar

Langkah kerja

File: style.css.

  1. Lanjutkan style.css. Tambahkan aturan body untuk warna dasar teks dan background halaman.
  2. Tambahkan selector a agar link memiliki warna yang mudah dikenali.
  3. Pertahankan aturan h1 dan p yang sudah ada.
  4. Coba satu kombinasi warna sendiri yang tetap terbaca, lalu bandingkan dengan contoh.

Kode yang ditambahkan atau diubah

style.css · tambah body dan a

body {
  color: #192a54;
  background-color: #fffaf0;
}

a {
  color: #0056b3;
}

HTML tidak berubah. Nilai warna dalam contoh dapat dipersonalisasi; saat membandingkan kode tahap berikutnya, pertahankan pilihan sendiri jika masih terbaca.

Cek hasil: Latar halaman berubah dan semua link memiliki warna yang konsisten.

style.css — kode lengkap sementara
/* DITAMBAHKAN PADA TAHAP 04 */
body {
  color: #192a54;
  background-color: #fffaf0;
}

/* Aturan dari tahap sebelumnya tetap dipertahankan */
h1 {
  color: maroon;
}

p {
  color: navy;
}

/* DITAMBAHKAN PADA TAHAP 04 */
a {
  color: #0056b3;
}

Sudah selesai? Coba mengganti nilai warna dari nama warna ke kode hex pada satu aturan.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 05

Jenis Font dan Hierarki Teks

Langkah kerja

File: style.css.

  1. Pada blok body yang sudah ada, tambahkan font-family dan font-size.
  2. Pada blok h1 yang sudah ada, tambahkan ukuran serta ketebalan teks.
  3. Tambahkan aturan h2 dan h3 agar tingkat judul terlihat berbeda.
  4. Refresh dan bandingkan judul utama, judul bagian, dan isi paragraf.

Kode yang ditambahkan atau diubah

Gabungkan property berikut ke selector yang sudah ada; jangan mengganti seluruh blok atau menghapus property lama.

style.css · tambah property ke blok yang ada

body {
  /* Tambahkan ke blok body yang sudah ada */
  font-family: Arial, sans-serif;
  font-size: 18px;
}

h1 {
  /* Tambahkan ke blok h1 yang sudah ada */
  font-size: 36px;
  font-weight: 700;
}

style.css · blok baru

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

Tambahkan property pada blok yang sudah ada. Jangan menyalin blok body atau h1 berulang hanya untuk menambah property.

Cek hasil: Font halaman konsisten; ukuran h1, h2, h3, dan isi dapat dibedakan.

style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  /* DITAMBAHKAN PADA TAHAP 05 */
  font-family: Arial, sans-serif;
  font-size: 18px;
}

h1 {
  color: maroon;
  /* DITAMBAHKAN PADA TAHAP 05 */
  font-size: 36px;
  font-weight: 700;
}

/* DITAMBAHKAN PADA TAHAP 05 */
h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

Sudah selesai? Coba font alternatif yang tersedia di perangkat, lalu jelaskan perbedaannya.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 06

Perataan dan Jarak Antarbaris

Langkah kerja

File: style.css.

  1. Tambahkan line-height pada body dan h1.
  2. Atur paragraf rata kiri; atur header dan footer rata tengah.
  3. Coba text-align: justify; sementara pada p, lalu hapus property percobaan itu agar paragraf mewarisi perataan dari induknya.
  4. Coba line-height 1.0 lalu 1.6 pada body. Pilih nilai yang membuat isi nyaman dibaca.

Kode yang ditambahkan atau diubah

Gabungkan property berikut ke selector yang sudah ada; jangan mengganti seluruh blok atau menghapus property lama.

style.css · tambah ke blok body dan h1

body {
  /* Pertahankan property sebelumnya */
  line-height: 1.6;
  text-align: left;
}

h1 {
  /* Pertahankan property sebelumnya */
  line-height: 1.2;
}

style.css · blok baru

header {
  text-align: center;
}

footer {
  text-align: center;
}

line-height mengatur jarak antarbaris, bukan margin antarelemen. Margin dan layout dipelajari pada Pertemuan 04.

Cek hasil: Identitas dan footer rata tengah; paragraf tetap rata kiri dan antarbaris lebih lega.

style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  /* DITAMBAHKAN PADA TAHAP 06 */
  line-height: 1.6;
  text-align: left;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  /* DITAMBAHKAN PADA TAHAP 06 */
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

/* DITAMBAHKAN PADA TAHAP 06 */
header {
  text-align: center;
}

footer {
  text-align: center;
}

Sudah selesai? Coba rata kanan pada footer, lalu kembalikan ke tengah.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 07

Selector Class pada Konten yang Sudah Ada

Langkah kerja

File: index.html dan style.css.

  1. Pada paragraf pertama di section profil, tambahkan class="sorotan". Jangan menambah paragraf duplikat.
  2. Tambahkan class yang sama pada satu li di Target Belajar.
  3. Tambahkan satu aturan .sorotan pada style.css.
  4. Simpan kedua file dan amati dua elemen dengan tag berbeda yang menerima class yang sama.

Kode yang ditambahkan atau diubah

index.html · tambahkan class, pertahankan isi

<!-- Paragraf pertama pada section profil -->
<p class="sorotan">Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik mempelajari pengembangan web.</p>

<!-- Item pertama daftar Target Belajar -->
<li class="sorotan">Memahami struktur HTML</li>

style.css · blok baru

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

Pada tahap ini HTML hanya berubah pada atribut class. Isi, urutan, ID, dan foto tetap memakai hasil P02.

Cek hasil: Paragraf dan satu target belajar memiliki gaya sorotan; elemen lain tetap normal.

index.html — kode lengkap sementara
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
  <!-- DITAMBAHKAN PADA TAHAP 03: style.css sejajar dengan index.html -->
  <link rel="stylesheet" href="style.css">
  <!-- AKHIR TAMBAHAN TAHAP 03 -->
</head>
<body>
  <header id="beranda">
    <h1>Nama Mahasiswa</h1>
    <h2>Mahasiswa Bisnis Digital</h2>
    <h3>Institut Bisnis dan Teknologi Indonesia</h3>

    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>

  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img
        src="assets/images/foto.jpg"
        alt="Foto profil Nama Mahasiswa"
        width="220"
      >
      <!-- DIUBAH PADA TAHAP 07: hanya tambahkan atribut class pada paragraf ini -->
      <p class="sorotan">
        Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
        mempelajari pengembangan web.
      </p>
      <p>
        Saya ingin membuat halaman yang
        <em>rapi dan mudah dipahami</em>.
      </p>

    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <!-- DIUBAH PADA TAHAP 07: gunakan class yang sama pada elemen lain -->
        <li class="sorotan">Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>

      <p><a href="#beranda">Kembali ke bagian atas</a></p>
    </section>
  </main>

  <footer>
    <p>
      &copy; 2026 Nama Mahasiswa.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>
style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

/* DITAMBAHKAN PADA TAHAP 07 */
.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

Sudah selesai? Terapkan class yang sama pada elemen ketiga, lalu amati penggunaan ulangnya.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 08

Selector ID Tanpa Mengganti Navigasi

Langkah kerja

File: style.css.

  1. Periksa bahwa header pada HTML sudah memiliki id="beranda" dari P02.
  2. Tambahkan aturan #beranda pada style.css untuk memberi warna latar header.
  3. Pertahankan ID profil, minat, target, tautan, dan beranda.
  4. Klik link Kembali ke bagian atas serta menu navigasi untuk memastikan tetap berfungsi.

Kode yang ditambahkan atau diubah

style.css · blok baru

#beranda {
  background-color: #e9eef7;
}

Tidak perlu mengganti beranda menjadi hero atau menambahkan header baru. ID yang sama dapat menjadi tujuan link dan selector CSS.

Cek hasil: Latar header berubah dan semua link internal tetap menuju bagian yang benar.

style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

/* DITAMBAHKAN PADA TAHAP 08: gunakan ID beranda yang sudah ada */
#beranda {
  background-color: #e9eef7;
}

Sudah selesai? Coba warna latar lain pada #beranda yang tetap membuat heading terbaca.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 09

Eksperimen Cascade dan Spesifisitas

Langkah kerja

File: style.css.

  1. Tambahkan dua aturan p pada bagian paling bawah style.css seperti blok eksperimen yang ditandai.
  2. Amati paragraf biasa: aturan color yang lebih akhir membuatnya forestgreen.
  3. Amati paragraf dengan class sorotan: warnanya tetap mengikuti .sorotan.
  4. Tukar posisi dua aturan p percobaan dan amati perubahan paragraf biasa.
  5. Kembalikan urutan eksperimen seperti kode di bawah sebelum masuk tahap 10.

Kode yang ditambahkan atau diubah

style.css · tambahkan paling bawah sementara

/* EKSPERIMEN SEMENTARA */
p { color: red; }
p { color: forestgreen; }

Ini aturan normal dalam stylesheet yang sama, tanpa !important. Bandingkan property yang sama pada elemen yang sama; jangan menyimpulkan bahwa aturan terakhir selalu menang dalam semua keadaan.

Cek hasil: Anda bisa menjelaskan perbedaan pengaruh urutan aturan dan class pada property color.

style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

#beranda {
  background-color: #e9eef7;
}

/* EKSPERIMEN SEMENTARA TAHAP 09: dua aturan ini dihapus pada tahap 10 */
p {
  color: red;
}

p {
  color: forestgreen;
}
/* AKHIR EKSPERIMEN SEMENTARA TAHAP 09 */

Sudah selesai? Di DevTools, pilih paragraf biasa dan paragraf sorotan; bandingkan aturan color yang aktif.

← Tahap sebelumnyaTahap berikutnya →

PRAKTIKUM 10

DevTools, Pembersihan, dan Pemeriksaan Akhir

Langkah kerja

File: style.css.

  1. Hapus hanya dua blok p yang berada di antara komentar EKSPERIMEN SEMENTARA TAHAP 09 dan AKHIR EKSPERIMEN. Pertahankan blok p utama dan aturan lainnya.
  2. Simpan style.css lalu refresh. Paragraf biasa kembali navy; sorotan tetap memakai class.
  3. Buka Inspect/DevTools. Pilih h1 atau paragraf dan periksa Styles serta Computed.
  4. Coba mengubah satu value di DevTools, lalu refresh untuk melihat bahwa perubahan itu tidak otomatis tersimpan.
  5. Jika ingin mempertahankan perubahan, tulis di style.css, simpan, dan refresh kembali.
  6. Periksa link stylesheet, gambar, navigasi, kontras, dan identitas sendiri.

Bagian yang dihapus

style.css · hapus dua aturan percobaan ini

/* HAPUS kedua blok berikut dari bagian bawah file */
p { color: red; }
p { color: forestgreen; }

File HTML tetap seperti tahap 07. Hasil ini menjadi dasar Pertemuan 04; belum memakai Box Model atau Flexbox.

Cek hasil: Satu file CSS terhubung, aturan percobaan bersih, konten P02 utuh, dan navigasi tetap bekerja.

style.css — kode lengkap sementara
body {
  color: #192a54;
  background-color: #fffaf0;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

h1 {
  color: maroon;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

p {
  color: navy;
}

a {
  color: #0056b3;
}

header {
  text-align: center;
}

footer {
  text-align: center;
}

.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

#beranda {
  background-color: #e9eef7;
}

/* TAHAP 10: dua aturan p untuk eksperimen sudah dihapus.
   Warna paragraf biasa kembali mengikuti p { color: navy; } di atas.
   Class sorotan dan selector #beranda tetap dipertahankan. */

Sudah selesai? Tukar pemeriksaan dengan teman: jelaskan satu selector tag, class, dan ID yang dipakai.

← Tahap sebelumnyaLihat hasil akhir →