MATERI PERTEMUAN 12
Dasar HTML & CSS untuk
Kustomisasi Tema
Mata Diklat: CMS & Web Development (WordPress 7) · Program Studi Digital Office Specialist
Menyentuh sedikit kode untuk kustomisasi tampilan yang tidak bisa dicapai lewat Block Editor saja.
12 / 16
Pertemuan
100%
Praktik Lab
2
Bahasa Dasar
CMS & Web Development · Pertemuan 12
01
Agenda Hari Ini
Dasar-dasar kode untuk melengkapi kustomisasi visual yang sudah dipelajari.
Mengapa Perlu HTML & CSS
Melengkapi Block Editor untuk kustomisasi yang lebih presisi.
Dasar HTML
Struktur tag, elemen umum, dan atribut class/id.
Dasar CSS
Selector, properti umum, dan konsep box model.
Menyisipkan Kode di WordPress
Custom HTML block dan Additional CSS.
Praktik Baik
Menulis kode yang rapi, aman, dan mudah dirawat.
CMS & Web Development · Pertemuan 12
02
Mengapa Perlu HTML & CSS di WordPress?
Block Editor dan Full Site Editing mencakup sebagian besar kebutuhan, namun sentuhan HTML dan CSS memungkinkan kustomisasi yang lebih presisi — seperti tata letak khusus, gaya elemen unik, atau perbaikan tampilan kecil yang tidak tersedia di pengaturan blok.
HTML
Membangun struktur dan isi konten — apa yang ditampilkan di halaman.
CSS
Mengatur tampilan — bagaimana warna, jarak, dan tata letak elemen terlihat.
CMS & Web Development · Pertemuan 12
03
Dasar HTML: Struktur & Tag Umum
<div class="kartu-info">
<h3>Jam Operasional</h3>
<p>Senin – Jumat, 08.00 – 16.00</p>
<a href="/kontak">Hubungi Kami</a>
</div>
div, p, h1–h6
Elemen struktur dasar: blok, paragraf, dan judul berjenjang.
a, img, ul/li
Tautan, gambar, dan daftar untuk menyusun konten.
class & id
Atribut untuk menandai elemen agar bisa diatur gayanya oleh CSS.
CMS & Web Development · Pertemuan 12
04
Dasar CSS: Selector & Properti
.kartu-info {
background: #F2FAF9;
padding: 16px;
border-radius: 8px;
color: #1F3A3C;
}
Selector
Menentukan elemen mana yang diatur: element, .class, atau #id.
Properti Umum
color, background, font-size, margin, padding, border.
Value
Nilai dari setiap properti, seperti warna, ukuran, atau satuan piksel.
CMS & Web Development · Pertemuan 12
05
Box Model CSS
Setiap elemen HTML dibungkus oleh empat lapisan berikut.
MARGIN
BORDER
PADDING
CONTENT
Content: Isi elemen: teks atau gambar itu sendiri.
Padding: Jarak antara isi dengan garis tepi elemen.
Border: Garis tepi yang membungkus padding dan content.
Margin: Jarak antara elemen dengan elemen lain di sekitarnya.
CMS & Web Development · Pertemuan 12
06
Menyisipkan Custom HTML di WordPress
1
Buka Page/Post pada Block Editor, klik ikon tambah (+) untuk membuka Block Inserter.
2
Cari dan sisipkan blok Custom HTML.
3
Tulis kode HTML sederhana pada area blok tersebut.
4
Gunakan tampilan Preview pada blok untuk melihat hasil sebelum dipublikasikan.
CMS & Web Development · Pertemuan 12
07
Menambahkan CSS Kustom
1
Buka Site Editor → Styles → Additional CSS (atau Appearance → Customize → Additional CSS pada tema classic).
2
Tulis atau tempelkan aturan CSS pada kolom yang tersedia.
3
Simpan dan periksa hasilnya melalui live preview.
4
Untuk menargetkan blok tertentu, tambahkan Additional CSS Class pada panel Advanced blok tersebut.
CMS & Web Development · Pertemuan 12
08
Contoh Praktik: Kustomisasi Sederhana
Ubah Warna Tombol
Mengganti warna latar dan teks tombol agar sesuai identitas kantor.
Tambah Spacing
Mengatur margin/padding agar elemen tidak terlalu rapat.
Buat Kartu Sederhana
Menggabungkan HTML & CSS untuk membuat kotak informasi khusus.
CMS & Web Development · Pertemuan 12
09
Praktik Baik Menulis CSS di WordPress
Gunakan Selector Spesifik
Targetkan class tertentu agar tidak memengaruhi elemen lain di luar rencana.
Hindari !important Berlebihan
Gunakan hanya jika benar-benar diperlukan agar CSS tetap mudah dirawat.
Uji di Berbagai Halaman
Pastikan tampilan tetap konsisten di desktop maupun mobile.
Dokumentasikan Perubahan
Catat kode dan tujuannya agar mudah ditelusuri di kemudian hari.
CMS & Web Development · Pertemuan 12
10
Ringkasan Pertemuan 12
HTML membangun struktur konten; CSS mengatur bagaimana konten itu tampil.
Custom HTML block dan Additional CSS memungkinkan kustomisasi presisi di WordPress.
Box model (content, padding, border, margin) adalah dasar dari setiap tata letak CSS.
Persiapan Pertemuan 13
Dasar PHP & Child Theme: modifikasi tema secara aman.
CMS & Web Development · Pertemuan 12
11