Pertemuan 03 | Dasar-dasar Styling dengan CSS

SLIDE 01

DASAR-DASAR STYLING DENGAN CSS

PERTEMUAN 03Memberi Tampilan Visual pada Struktur HTMLDari halaman terstruktur menjadi halaman yang menarik dan konsisten.

DOSEN PENGAMPUI Kayan Herdiana, S.Kom., M.Kom.081 999 886 827

</>

STRUKTUR

HTML

Menyusun judul, paragraf, gambar, link, dan bagian halaman.

CSS

PRESENTASI

CSS

Mengatur warna, tipografi, ukuran, jarak, dan konsistensi visual.

Petunjuk praktikum Lihat hasil akhir P03

SLIDE 02

CAPAIAN PEMBELAJARAN PERTEMUAN 03

MEMAHAMI

01Fungsi CSS pada halaman web

02Inline, internal, dan external CSS

03Selector, property, dan value

04Selector tag, class, dan ID

MEMPRAKTIKKAN

✓

Menghubungkan style.css

✓

Mengatur warna dan background

✓

Mengatur tipografi dasar

✓

Memberi style halaman profil

SLIDE 03

MENGINGAT KEMBALI PERTEMUAN 02

HTML sudah memberi struktur dan makna. Kini CSS akan mengatur bagaimana struktur tersebut ditampilkan.

01HTMLJudul, paragraf, link, gambar

→

02StrukturHeader, nav, main, footer

→

03CSSAturan tampilan visual

→

04HalamanRapi, terbaca, konsisten

PERTANYAAN

Apa yang terjadi jika halaman HTML tidak menggunakan CSS?

SLIDE 04

APA ITU CSS

PENGERTIAN

Cascading Style Sheets

CSS adalah bahasa stylesheet untuk mengatur presentasi visual elemen HTML.

WarnaFontUkuranJarak

HTML+CSS

HASIL

Tampilan Terarah

Konten lebih mudah dibaca.
Identitas visual lebih konsisten.
Bagian penting lebih menonjol.
Gaya dapat digunakan ulang.

INTI

HTML menjelaskan apa isi halaman; CSS mengatur bagaimana tampilannya.

SLIDE 05

TIGA CARA MENAMBAHKAN CSS

01

INLINE

Atribut style

Aturan ditulis langsung pada satu elemen HTML.

Satu elemen→Sangat spesifik

02

INTERNAL

Elemen style

Aturan ditulis di dalam bagian head halaman.

Satu halaman→Terpusat

03

EXTERNAL

File style.css

Aturan disimpan pada file CSS terpisah.

Banyak halaman→Dapat digunakan ulang

UTAMA

Untuk proyek web, gunakan external CSS agar kode lebih rapi dan mudah dipelihara.

SLIDE 06

INLINE CSS

CARA KERJA

Atribut style

Aturan CSS ditempatkan langsung pada elemen yang ingin diubah.

+

Cepat dicobaCocok untuk eksperimen singkat.

−

Sulit dipeliharaAturan bercampur dengan struktur HTML.

inline.html

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

<p style="font-size: 18px;">
  Saya belajar Web Programming.
</p>

BATASAN

Hindari inline CSS untuk banyak elemen karena akan menghasilkan pengulangan.

SLIDE 07

PRAKTIKUM 01 · Inline CSS pada Heading

inline.html.

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

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

Buka petunjuk tahap 01

inline.html

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

SLIDE 08

INTERNAL CSS

KARAKTERISTIK

Ditulis pada elemen <style>.
Ditempatkan di dalam <head>.
Berlaku untuk satu halaman HTML.
Selector dapat digunakan berulang pada halaman.

COCOK

Halaman tunggal atau contoh pembelajaran sederhana.

internal.html

<head>
  <style>
    h1 {
      color: maroon;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>

SLIDE 09

PRAKTIKUM 02 · Internal CSS

internal.html.

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

Cek: h1 berwarna maroon dan paragraf navy.

Buka petunjuk tahap 02

internal.html

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

SLIDE 10

EXTERNAL CSS

index.html

<head>
  <meta charset="utf-8">
  <title>Profil Saya</title>
  <link rel="stylesheet"
        href="style.css">
</head>

style.css

h1 {
  color: maroon;
}

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

RAPI

HTML dan CSS terpisah.

KONSISTEN

Satu file untuk banyak halaman.

MUDAH

Perubahan dikelola terpusat.

SLIDE 11

PRAKTIKUM 03 · External CSS pada Satu File style.css

index.html dan style.css.

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

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

Buka petunjuk tahap 03

index.html + style.css

<!-- Tambahkan pada head index.html -->
<link rel="stylesheet" href="style.css">

/* Buat style.css */
h1 { color: maroon; }
p { color: navy; }

SLIDE 12

MEMBACA ATURAN CSS

Selector → property → value

p memilih paragraf. Di dalam kurung kurawal, setiap deklarasi ditulis sebagai property: value;.

Satu selector dapat memiliki beberapa deklarasi. Tambahkan property ke blok yang sudah ada agar stylesheet mudah dirawat.

style.css

p {
  color: navy;
  background-color: #fffaf0;
}

SLIDE 13

SELECTOR TAG, WARNA, DAN LATAR

Selector tag berlaku pada semua elemen dengan tag tersebut.

color: warna teks.
background-color: warna latar.
Gunakan nama warna atau kode hex.

Pastikan warna teks kontras dengan latarnya.

style.css

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

SLIDE 14

PRAKTIKUM 04 · Selector Tag, Warna Teks, dan Latar

style.css.

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

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

Buka petunjuk tahap 04

style.css

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

SLIDE 15

FONT DAN HIERARKI TEKS

font-family: jenis font dan alternatifnya.
font-size: ukuran teks.
font-weight: ketebalan.

Bedakan judul utama, subjudul, dan isi tanpa membuat teks isi terlalu kecil.

style.css

/* Tambahkan ke blok yang sesuai */
body { font-family: Arial, sans-serif;
       font-size: 18px; }
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 400; }

SLIDE 16

PRAKTIKUM 05 · Jenis Font dan Hierarki Teks

style.css.

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

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

Buka petunjuk tahap 05

style.css

/* Tambahkan ke blok yang sesuai */
body { font-family: Arial, sans-serif;
       font-size: 18px; }
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 400; }

SLIDE 17

PERATAAN DAN JARAK ANTARBARIS

text-align mengatur perataan isi teks. line-height mengatur jarak antarbaris, bukan jarak antarelemen.

Paragraf mewarisi perataan dari induknya jika tidak diberi aturan sendiri. Karena itu paragraf footer dapat ikut rata tengah.

Margin dan tata letak dibahas pada P04.

style.css

/* Tambahkan ke blok yang sesuai */
body { line-height: 1.6; text-align: left; }
h1 { line-height: 1.2; }
header, footer { text-align: center; }

SLIDE 18

PRAKTIKUM 06 · Perataan dan Jarak Antarbaris

style.css.

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

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

Buka petunjuk tahap 06

style.css

/* Tambahkan ke blok yang sesuai */
body { line-height: 1.6; text-align: left; }
h1 { line-height: 1.2; }
header, footer { text-align: center; }

SLIDE 19

SELECTOR CLASS

CLASS DAPAT DIGUNAKAN ULANG

Tambahkan atribut class pada HTML.
Gunakan tanda titik pada selector CSS.
Satu class dapat dipakai banyak elemen.
Satu elemen dapat memiliki beberapa class.

POLA

HTML: class="sorotan"
CSS: .sorotan

HTML + CSS

<p class="sorotan">Informasi penting</p>
<p>Informasi biasa</p>
<p class="sorotan">Pengumuman</p>

.sorotan {
  color: maroon;
  background-color: gold;
}

SLIDE 20

PRAKTIKUM 07 · Selector Class pada Konten yang Sudah Ada

index.html dan style.css.

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

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

Buka petunjuk tahap 07

index.html + style.css

<!-- Tambahkan class pada p profil & li target -->
<p class="sorotan">...</p>
<li class="sorotan">...</li>

/* Tambahkan ke style.css */
.sorotan {
  color: #7a2300;
  background-color: #fff1cf;
  font-weight: 700;
}

SLIDE 21

SELECTOR ID

IDENTITAS UNIK

Gunakan tanda #

Selector ID memilih elemen berdasarkan nilai atribut id.

1×

Unik dalam halamanNilai ID tidak boleh diduplikasi.

#

Selector CSSDiawali tanda pagar.

HTML + CSS

<header id="beranda">
  <h1>Profil Mahasiswa</h1>
</header>

#beranda {
  background-color: #e9eef7;
}

CATATAN

Untuk styling yang dapat digunakan ulang, class biasanya lebih fleksibel daripada ID.

SLIDE 22

PRAKTIKUM 08 · Selector ID Tanpa Mengganti Navigasi

style.css.

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

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

Buka petunjuk tahap 08

style.css

#beranda {
  background-color: #e9eef7;
}

SLIDE 23

PERBANDINGAN TAG, CLASS, DAN ID

TAG

UMUM

`p`

Memilih semua elemen dengan nama tag yang sama.

Gaya dasar
Cakupan luas
Dapat berulang

.

DAPAT DIULANG

`.kartu`

Memilih elemen yang memiliki class tertentu.

Komponen
Fleksibel
Dapat berulang

#

UNIK

`#beranda`

Memilih satu elemen dengan ID tertentu.

Identitas
Spesifik
Satu kali

SLIDE 24

CASCADE DAN SPESIFISITAS

Untuk aturan normal dalam stylesheet yang sama:

Selector dengan spesifisitas lebih tinggi didahulukan.
Jika spesifisitas sama, aturan yang ditulis terakhir menang.
Class lebih spesifik daripada tag; ID lebih spesifik daripada class.

Bandingkan property yang sama pada elemen yang sama. Tidak perlu !important.

style.css

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

/* Tukar urutannya dan bandingkan.
   Class .sorotan tetap lebih spesifik. */

SLIDE 25

PRAKTIKUM 09 · Eksperimen Cascade dan Spesifisitas

style.css.

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

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

Buka petunjuk tahap 09

style.css

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

/* Tukar urutannya dan bandingkan.
   Class .sorotan tetap lebih spesifik. */

SLIDE 26

MEMERIKSA CSS DENGAN DEVELOPER TOOLS

LANGKAH PEMERIKSAAN

Buka halaman di browser.
Tekan F12 atau Inspect.
Pilih elemen pada tab Elements.
Lihat panel Styles atau Computed.
Periksa aturan aktif dan tertimpa.

YANG DAPAT DICOBA

01

Aktif/nonaktifkan propertyGunakan kotak centang pada aturan.

↓

02

Ubah value sementaraCoba warna atau ukuran langsung.

↓

03

Salin ke style.cssPerubahan DevTools tidak tersimpan otomatis.

F12

Property yang dicoret biasanya kalah oleh aturan lain atau tidak berlaku pada elemen tersebut.

SLIDE 27

PRAKTIKUM 10 · DevTools, Pembersihan, dan Pemeriksaan Akhir

style.css.

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

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

Buka petunjuk tahap 10

style.css

/* Hapus dua aturan p eksperimen tahap 09. */
/* Jangan hapus aturan p asli atau .sorotan. */

SLIDE 28

QUIZ PEMAHAMAN PERTEMUAN 03

Metode CSS yang disimpan pada file terpisah adalah...A. Inline B. Internal C. External D. Embedded
Tanda untuk selector class adalah...A. # B. . C. : D. *
Property untuk warna teks adalah...A. color B. font-color C. text-color D. background

Selector yang paling spesifik adalah...A. tag B. class C. ID D. universal
Property jarak antarbaris adalah...A. text-space B. line-height C. font-gap D. letter-height
File CSS dihubungkan dengan elemen...A. style B. script C. link D. meta

SLIDE 29

REFLEKSI DAN RANGKUMAN

KONSEP UTAMA

01Peran CSS pada tampilan

02Inline, internal, external

03Selector, property, value

04Tag, class, dan ID

SUDAH BISA

✓

Menghubungkan style.css

✓

Mengatur warna dan font

✓

Membuat hierarki teks

✓

Memeriksa CSS di browser

REFLEKSI

Selector mana yang paling sering Anda gunakan?

EVALUASI

Apa kendala saat menghubungkan file CSS?

SLIDE 30

PERSIAPAN PERTEMUAN 04

BERIKUTNYACSS Box Model dan FlexboxMengatur ruang, dimensi, dan susunan elemen halaman.

MATERI

ContentPaddingBorderMarginDisplay FlexAlignment

PERSIAPKAN

✓index.html halaman profil

✓style.css hasil praktik

✓Folder assets

✓Catatan kendala styling