Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model

Topik: CSS Fundamentals, Selector, Color, Typography, dan Box Model

Pada Pertemuan 1 kita membuat profil usaha menggunakan HTML dasar. Pada Pertemuan 2 halaman tersebut berkembang menjadi katalog dan form data produk. Struktur halaman sudah mulai terasa seperti sebuah aplikasi, tetapi tampilannya masih mengikuti gaya bawaan browser.

Sekarang kita mulai menggunakan CSS. CSS tidak mengubah fungsi utama HTML. HTML tetap menyimpan struktur dan konten, sedangkan CSS bertugas mengatur bagaimana konten tersebut ditampilkan.

Agar project semester tetap nyambung, contoh praktik akan menggunakan produk dan katalog NusaTech Store. Namun konsep CSS yang dipelajari bersifat umum dan dapat diterapkan pada website apa pun.

Materi dibagi menjadi 5 bagian utama. Setiap bagian ditutup dengan praktik coding. Pada akhir pertemuan, mahasiswa akan membuat Katalog Produk Sederhana dengan Product Card.

Target Pembelajaran

• Memahami fungsi CSS dalam pengembangan website.
• Memahami perbedaan inline, internal, dan external CSS secara umum.
• Menghubungkan file HTML dengan external CSS.
• Memahami aturan dasar selector, property, dan value.
• Menggunakan element selector, class selector, dan ID selector.
• Memahami konsep specificity secara sederhana.
• Mengatur warna teks dan background.
• Mengatur typography menggunakan font-family, font-size, font-weight, line-height, dan text-align.
• Memahami content, padding, border, dan margin pada Box Model.
• Menggunakan box-sizing: border-box.
• Menggunakan border-radius dan box-shadow.
• Membuat Product Card sebagai mini project.

Materi 1 — Mengenal CSS dan Menghubungkannya dengan HTML

CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen HTML, misalnya warna, ukuran teks, jarak, border, background, dan posisi elemen.

Tiga Cara Menggunakan CSS

CSS dapat ditulis dengan tiga cara:

• Inline CSS — ditulis langsung pada attribute style.
• Internal CSS — ditulis di dalam elemen style pada bagian head.
• External CSS — ditulis pada file CSS terpisah.

Dalam project kita, metode utama yang digunakan adalah external CSS karena struktur HTML dan tampilan dapat dipisahkan dengan lebih rapi.

Struktur Folder Project

pertemuan-03/
|
+-- index.html
|
+-- css/
    |
    +-- style.css

Menghubungkan HTML dengan CSS

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

Attribute rel="stylesheet" memberi tahu browser bahwa file tersebut adalah stylesheet, sedangkan href="css/style.css" menunjukkan lokasi file CSS.

Anatomi Aturan CSS

h1 {
    color: #2563eb;
}

Pada contoh tersebut, h1 adalah selector, color adalah property, dan #2563eb adalah value.

Coding 1 — CSS Pertama untuk Katalog Produk

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Katalog Produk</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>NusaTech Store</h1>

    <p>
        Katalog perlengkapan digital
        untuk belajar dan bekerja.
    </p>

    <h2>Produk Unggulan</h2>

    <p>
        Keyboard Mechanical — Rp350.000
    </p>

</body>
</html>

body {
    background-color: #f4f4f4;
}

h1 {
    color: #1d4ed8;
}

h2 {
    color: #111827;
}

p {
    color: #374151;
}

Target Coding 1: mahasiswa mampu menghubungkan HTML dengan external CSS dan melihat perubahan tampilan di browser.

Materi 2 — Memahami Selector: Element, Class, dan ID

CSS perlu mengetahui elemen mana yang ingin diubah. Untuk itu kita menggunakan selector. Tiga selector dasar yang perlu dipahami adalah element, class, dan ID.

Element Selector

Element selector menggunakan nama tag HTML secara langsung.

p {
    color: #374151;
}

Class Selector

Class digunakan untuk memberi nama kelompok elemen. Pada CSS, class ditulis menggunakan tanda titik. Satu class dapat digunakan oleh banyak elemen.

<p class="harga">
    Rp350.000
</p>

.harga {
    color: #047857;
    font-weight: bold;
}

ID Selector

ID digunakan untuk memberi identitas yang lebih khusus pada suatu elemen. Pada CSS, ID diawali dengan tanda pagar.

<h1 id="nama-toko">
    NusaTech Store
</h1>

#nama-toko {
    color: #1d4ed8;
}

Specificity Secara Sederhana

Jika beberapa aturan CSS mengenai elemen yang sama, browser perlu menentukan aturan mana yang lebih kuat. Untuk tahap awal, ingat pola sederhana berikut:

Element Selector
    ↓
Class Selector
    ↓
ID Selector

Semakin khusus selector,
biasanya semakin kuat pengaruhnya.

Coding 2 — Mengatur Informasi Produk dengan Class dan ID

<section class="produk">
    <h1 id="judul-katalog">
        Katalog NusaTech Store
    </h1>

    <h2 class="nama-produk">
        Keyboard Mechanical
    </h2>

    <p class="harga">
        Rp350.000
    </p>

    <p class="stok">
        Stok: 10
    </p>

    <p class="deskripsi">
        Keyboard untuk kebutuhan belajar,
        bekerja, dan aktivitas digital.
    </p>
</section>

#judul-katalog {
    color: #1d4ed8;
}

.nama-produk {
    color: #111827;
}

.harga {
    color: #047857;
    font-weight: bold;
}

.stok {
    color: #b45309;
}

.deskripsi {
    color: #4b5563;
}

Target Coding 2: mahasiswa mampu memilih selector yang sesuai dan memahami perbedaan element, class, dan ID.

Materi 3 — Mengatur Warna dan Typography

Setelah selector dipahami, kita mulai mengatur tampilan teks. Dua hal yang paling cepat terlihat adalah warna dan typography.

Mengatur Warna

CSS mendukung berbagai cara menulis warna, misalnya nama warna, HEX, dan RGB.

h1 {
    color: blue;
}

h1 {
    color: #2563eb;
}

h1 {
    color: rgb(37, 99, 235);
}

Background

body {
    background-color: #f3f4f6;
}

Typography

Beberapa property typography yang sering digunakan:

• font-family — jenis huruf.
• font-size — ukuran huruf.
• font-weight — ketebalan huruf.
• line-height — jarak antarbaris.
• text-align — perataan teks.

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.7;
}

Coding 3 — Membuat Informasi Produk Lebih Nyaman Dibaca

<section class="produk">
    <h1>Katalog Produk</h1>

    <p class="subjudul">
        Pilihan perlengkapan digital
        dari NusaTech Store
    </p>

    <h2>Keyboard Mechanical</h2>

    <p class="harga">
        Rp350.000
    </p>

    <p>
        Keyboard yang nyaman digunakan
        untuk belajar dan bekerja.
    </p>
</section>

body {
    font-family: Arial, sans-serif;

    background-color: #f3f4f6;
    color: #1f2937;
}

.produk h1 {
    color: #1d4ed8;

    font-size: 32px;
    text-align: center;
}

.subjudul {
    color: #6b7280;

    font-size: 18px;
    text-align: center;
}

.produk h2 {
    font-size: 24px;
}

.harga {
    color: #047857;

    font-size: 20px;
    font-weight: bold;
}

.produk p {
    line-height: 1.7;
}

Target Coding 3: mahasiswa mampu mengatur warna dan typography agar informasi produk lebih mudah dibaca.

Materi 4 — Memahami CSS Box Model

Hampir setiap elemen HTML dapat dibayangkan sebagai sebuah kotak. CSS menyebut konsep ini sebagai Box Model.

Margin
|
+-- Border
    |
    +-- Padding
        |
        +-- Content

• Content — isi elemen.
• Padding — ruang antara content dan border.
• Border — garis yang mengelilingi padding dan content.
• Margin — jarak antara elemen dengan elemen lain.

width dan box-sizing

Property box-sizing: border-box; membantu kita mengontrol ukuran elemen karena padding dan border ikut dihitung ke dalam width.

* {
    box-sizing: border-box;
}

border-radius dan box-shadow

border-radius membuat sudut kotak lebih halus, sedangkan box-shadow memberikan bayangan pada elemen.

Coding 4 — Membuat Product Card Sederhana

<article class="product-card">
    <h2>Keyboard Mechanical</h2>

    <p class="harga">
        Rp350.000
    </p>

    <p>
        Keyboard nyaman untuk belajar,
        bekerja, dan mengetik.
    </p>

    <p>
        Stok: 10
    </p>
</article>

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;

    background-color: #f3f4f6;
}

.product-card {
    width: 320px;

    margin: 40px auto;
    padding: 24px;

    background-color: white;

    border: 1px solid #d1d5db;
    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.product-card h2 {
    margin-top: 0;

    color: #1d4ed8;
}

.harga {
    color: #047857;

    font-size: 20px;
    font-weight: bold;
}

Target Coding 4: mahasiswa memahami hubungan content, padding, border, dan margin serta mampu membuat Product Card.

Materi 5 — Mini Project: Katalog Produk Sederhana

Sekarang kita menggabungkan external CSS, selector, class, ID, warna, typography, dan Box Model menjadi sebuah katalog produk sederhana.

Pada Pertemuan 3 kita belum menggunakan Flexbox. Karena itu Product Card masih tersusun secara normal dari atas ke bawah. Pengaturan layout modern akan dipelajari pada Pertemuan 5.

Struktur Project

katalog-produk/
|
+-- index.html
|
+-- css/
|   |
|   +-- style.css
|
+-- images/
    |
    +-- keyboard.jpg
    +-- mouse.jpg
    +-- headset.jpg

Coding 5 — Katalog Produk dengan Product Card

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Katalog NusaTech Store</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <main class="container">

        <header class="page-header">
            <p class="label">
                NusaTech Store
            </p>

            <h1 id="judul-katalog">
                Katalog Produk
            </h1>

            <p class="subjudul">
                Pilihan perlengkapan digital
                untuk belajar dan bekerja.
            </p>
        </header>

        <section class="katalog">

            <article class="product-card">
                <img
                    class="product-image"
                    src="images/keyboard.jpg"
                    alt="Keyboard Mechanical"
                >

                <h2>Keyboard Mechanical</h2>

                <p class="harga">
                    Rp350.000
                </p>

                <p class="stok">
                    Stok: 10
                </p>

                <p class="deskripsi">
                    Keyboard untuk kebutuhan belajar,
                    bekerja, dan aktivitas digital.
                </p>
            </article>

            <article class="product-card">
                <img
                    class="product-image"
                    src="images/mouse.jpg"
                    alt="Mouse Wireless"
                >

                <h2>Mouse Wireless</h2>

                <p class="harga">
                    Rp150.000
                </p>

                <p class="stok">
                    Stok: 15
                </p>

                <p class="deskripsi">
                    Mouse praktis untuk penggunaan
                    sehari-hari.
                </p>
            </article>

            <article class="product-card">
                <img
                    class="product-image"
                    src="images/headset.jpg"
                    alt="Headset Gaming"
                >

                <h2>Headset Gaming</h2>

                <p class="harga">
                    Rp275.000
                </p>

                <p class="stok">
                    Stok: 8
                </p>

                <p class="deskripsi">
                    Headset untuk belajar,
                    meeting, dan hiburan.
                </p>
            </article>

        </section>

    </main>

</body>
</html>

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f3f4f6;
    color: #1f2937;
}

.container {
    width: 90%;
    max-width: 700px;

    margin: 0 auto;
    padding: 40px 0;
}

.page-header {
    margin-bottom: 32px;

    text-align: center;
}

.label {
    color: #2563eb;

    font-size: 14px;
    font-weight: bold;
}

#judul-katalog {
    margin-top: 8px;
    margin-bottom: 10px;

    font-size: 34px;
}

.subjudul {
    color: #6b7280;

    line-height: 1.7;
}

.product-card {
    width: 100%;

    margin-bottom: 24px;
    padding: 24px;

    background-color: white;

    border: 1px solid #d1d5db;
    border-radius: 14px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.product-image {
    width: 100%;
    max-width: 280px;

    border-radius: 10px;
}

.product-card h2 {
    margin-bottom: 8px;

    color: #111827;
}

.harga {
    margin-top: 0;

    color: #047857;

    font-size: 20px;
    font-weight: bold;
}

.stok {
    color: #b45309;

    font-weight: bold;
}

.deskripsi {
    line-height: 1.7;
}

Target Coding 5: mahasiswa mampu membuat katalog sederhana dengan Product Card menggunakan HTML dan external CSS.

Debugging Challenge

Perhatikan source code berikut. Temukan dan perbaiki kesalahannya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <title>Product Card</title>

    <link
        rel="stylesheet"
        href="style.css"
    >
</head>
<body>

    <article class="product-card">
        <h2>Keyboard Mechanical</h2>

        <p class="harga">
            Rp350.000
        </p>
    </article>

</body>
</html>

.product {
    width: 320px;

    padding 24px;

    background-color: white;

    border-radius: 12px;
}

.harga {
    color: #047857
}

Tugas mahasiswa:

1. Periksa lokasi file CSS pada href.
2. Periksa apakah nama class HTML dan CSS sama.
3. Perbaiki penulisan property padding.
4. Perbaiki declaration CSS yang belum memiliki titik koma.

Challenge Pertemuan 3

Buat katalog produk untuk ide usaha masing-masing. Produk boleh berupa barang fisik, makanan, jasa, atau produk digital.

Minimal memiliki:

• External CSS.
• Element selector.
• Minimal dua class selector.
• Minimal satu ID selector.
• Background dan warna teks.
• Typography yang konsisten.
• Minimal tiga Product Card.
• Padding, border, margin, border-radius, dan box-shadow.
• Gambar produk menggunakan attribute alt.

Evaluasi Pemahaman

1. Apa fungsi CSS?
2. Apa perbedaan HTML dan CSS?
3. Apa perbedaan inline, internal, dan external CSS?
4. Mengapa external CSS cocok digunakan pada project?
5. Apa fungsi elemen link pada head?
6. Apa yang dimaksud selector?
7. Apa yang dimaksud property dan value?
8. Apa perbedaan element selector, class, dan ID?
9. Bagaimana cara menulis class selector?
10. Bagaimana cara menulis ID selector?
11. Apa yang dimaksud specificity secara sederhana?
12. Apa fungsi background-color?
13. Apa fungsi font-family?
14. Apa fungsi line-height?
15. Apa yang dimaksud CSS Box Model?
16. Apa perbedaan padding dan margin?
17. Apa fungsi border?
18. Apa fungsi box-sizing: border-box?
19. Apa fungsi border-radius?
20. Apa fungsi box-shadow?

Checklist Kompetensi Pertemuan 3

• Menghubungkan HTML dengan external CSS.
• Memahami selector, property, dan value.
• Menggunakan element, class, dan ID selector.
• Mengatur warna dan background.
• Mengatur typography.
• Memahami Box Model.
• Menggunakan padding dan margin.
• Menggunakan border.
• Menggunakan box-sizing.
• Menggunakan border-radius dan box-shadow.
• Membuat Product Card.
• Membuat katalog produk sederhana.

Rangkuman Pertemuan 3

Di Pertemuan 3 kita mulai memisahkan struktur dan tampilan. HTML tetap bertugas menyimpan konten, sedangkan CSS mengatur bagaimana konten ditampilkan.

1. Coding 1: menghubungkan HTML dengan external CSS.
2. Coding 2: menggunakan element, class, dan ID selector.
3. Coding 3: mengatur warna dan typography produk.
4. Coding 4: memahami Box Model dan membuat Product Card.
5. Coding 5: membuat Katalog Produk Sederhana.

Pertemuan 1
Profil Usaha
    |
    v
Pertemuan 2
Katalog + Form Data Produk
    |
    v
Pertemuan 3
CSS + Product Card
    |
    v
Pertemuan 4
JavaScript + Kalkulator Penjualan
    |
    v
Pertemuan 5
Responsive Store
    |
    v
PHP + MySQL + CRUD
    |
    v
Laravel

Menuju Pertemuan 4

Website kita sudah memiliki struktur dan tampilan. Namun halaman tersebut belum dapat melakukan perhitungan, mengambil keputusan, atau bereaksi terhadap input pengguna.

Pada pertemuan berikutnya kita mulai menggunakan JavaScript untuk memberi logika pada halaman dan membuat kalkulator transaksi penjualan sederhana.

Pertemuan 4 — Membuat Web Mulai Berpikir: Dasar JavaScript, DOM, Event, dan Logika Penjualan