FluentStack

Apa Itu CSS?

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner25 menitBahasa Indonesia

Apa Itu CSS?

Pahami peran CSS sebagai bahasa yang mengatur tampilan halaman HTML.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami CSS sebagai bahasa untuk mengatur tampilan HTML
  • Membedakan peran HTML dan CSS
  • Memberi style sederhana pada heading dan paragraf
CSSHTMLStyling

Isi lesson

6 blok
  1. 1.
    CSS memberi tampilan pada struktur HTMLBelum selesaiWajib
  2. 2.
    HTML yang diberi style CSSBelum selesaiWajib
  3. 3.
    CSS tidak menggantikan makna HTMLBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

CSS memberi tampilan pada struktur HTML

Wajib

Di module sebelumnya, kamu sudah menulis HTML untuk struktur, form, gambar, dan makna konten. CSS adalah bahasa yang mengatur tampilan HTML. CSS bisa mengatur warna, ukuran teks, jarak, border, layout, dan nanti tampilan responsive. HTML tetap menentukan struktur dan makna; CSS membuat struktur itu lebih jelas dan nyaman dilihat.

Bagian ini memengaruhi progres lesson.

HTML yang diberi style CSS

Wajib
html
<h1>Belajar CSS</h1>
<p>CSS membuat halaman lebih enak dibaca.</p>

<style>
  h1 {
    font-size: 32px;
  }

  p {
    color: #d4d4d8;
  }
</style>

h1 dan p dipilih dari HTML. font-size mengubah ukuran heading. color mengubah warna teks paragraf. Fokus dulu pada ide bahwa CSS memilih elemen, lalu memberi aturan tampilan.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

CSS tidak menggantikan makna HTML

Jangan memakai CSS untuk menutupi struktur HTML yang salah. Pilih HTML yang benar dulu, seperti h1 untuk heading atau button untuk aksi. Setelah maknanya benar, CSS dipakai untuk memperbaiki tampilan.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau HTML sudah menentukan bahwa sebuah teks adalah h1, CSS biasanya dipakai untuk apa?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Memberi style pada teks HTML

Latihan mengubah tampilan h1 dan paragraf memakai CSS sederhana.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • HTML mengatur struktur dan makna halaman.
  • CSS mengatur tampilan halaman.
  • CSS bekerja dengan memilih elemen HTML lalu memberi aturan visual.
  • Berikutnya, kamu akan belajar selector, property, dan value.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: CSS memberi tampilan pada struktur HTML.

Memuat progresReview module