Sesi 4: CSS Dasar Demo

by oktaviardi pratama

HTML

<div class="container">

  <!-- TOPIC 1: INTERNAL CSS (0:00 – 0:05) -->
    <!-- Kita menggunakan Internal CSS di sini agar semua kode ada di 1 file untuk demo -->

    <!-- HEADER -->
    <h1>Sesi 4: CSS Dasar</h1>
    <p class="text-center">Demo materi: Selectors, Text, Colors, Box Model.</p>

    <!-- TOPIC 1 & 2: INTRO & SELECTORS -->
    <section>
        <h2>1. Selectors (Class vs ID)</h2>
        
        <!-- Contoh ID (Unik) -->
        <div id="unique-header">
            Ini adalah elemen dengan <strong>ID (#unique-header)</strong>. Hanya boleh ada satu per halaman.
        </div>
        <br>

        <!-- Contoh Class (Reusable) -->
        <div class="highlight-box tipe1">
            Ini adalah <strong>Class (.highlight-box)</strong>. Bisa dipakai berkali-kali.
            Perhatikan teks miring ini: <em>Teks ini merah karena descendant selector (.highlight-box em)</em>.
        </div>

        <div class="highlight-box tipe2">
            Ini adalah <strong>Class (.highlight-box)</strong>. Bisa dipakai berkali-kali.
            Perhatikan teks miring ini: <em>Teks ini merah karena descendant selector (.highlight-box em)</em>.
        </div>

        <div class="highlight-box">
            Kotak kedua juga menggunakan class yang sama, tapi kontennya berbeda.
        </div>

        <!-- Contoh Inline CSS (0:00 – 0:05) -->
        <div class="inline-example" style="background-color: pink; color: darkred; text-align: center;">
            <strong>Inline CSS:</strong> Style ditulis langsung di tag HTML (atribut <code>style=""</code>). 
            <br><em>Hindari ini jika tidak terpaksa!</em>
        </div>
    </section>

    <!-- TOPIC 3: TEXT & FONT -->
    <section>
        <h2>2. Text & Font Styling</h2>
        <p>Paragraf normal menggunakan font default browser.</p>
        
        <div class="typography-demo">
            Paragraf ini menggunakan Class .typography-demo.<br>
            Font:...

CSS

/* Reset dasar agar box-model lebih mudah dipahami */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f9;
        }

        /* TOPIC 2: SELECTORS (0:05 – 0:15) */
        
        /* 1. Element Selector */
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }

        h2 {
            color: #2980b9;
            margin-top: 30px;
        }

        /* 2. Class Selector (Bisa dipakai berkali-kali) */
        .highlight-box {
            background-color: #fff;
            padding: 15px;
            border-left: 5px solid #f1c40f;
            margin-bottom: 15px;
        }

        .text-center {
            text-align: center;
        }

        /* 3. ID Selector (Unik, hanya untuk 1 elemen) */
        #unique-header {
            background-color: #2c3e50;
            color: white;
            padding: 10px;
            border-radius: 10px;
        }

        /* 4. Descendant Selector (Spasi) */
        /* Artinya: Hanya tag <em> yang berada DI DALAM .highlight-box */
        section .highlight-box.tipe2 em {
            color: #e74c3c;
            font-weight: bold;
        }

        /* TOPIC 3: TEXT & FONT STYLING (0:15 – 0:25) */
        .typography-demo {
            font-family: 'Courier New', Courier, monospace; /* Font Family */
            font-size: 21px;              /* Font Size */
            font-weight: 700;            /* Font Weight */
            text-transform:uppercase ;    /* Text Transform */
            text-decoration:line-through;   /* Text Decoration */
            letter-spacing: 10px;
            line-height: 28px;          /* Jarak antar huruf */
       ...