🎨

Belajar CSS Dasar dengan Eko Kurniawan

Apr 27, 2025

Catatan Kelas CSS Dasar

Pengantar

  • Nama pengajar: Eko Kurniawan, Technical Architect di salah satu e-commerce terbesar di Indonesia.
  • Pengalaman kerja: lebih dari 12 tahun.
  • Sumber belajar: Website Programmer Zaman Now dan YouTube.
  • Pastikan telah mengikuti kelas HTTP dan HTML sebelumnya.

Persiapan Proyek

  • Buat folder: belajar CSS dasar dan buka menggunakan Visual Studio Code.
  • Instal extension Live Preview untuk melihat hasil kode secara langsung.

Apa itu CSS?

  • CSS: Cascading Style Sheets, digunakan untuk memberi gaya dan layout pada konten HTML.
  • HTML memberikan struktur, CSS memberikan penampilan.
  • CSS mendeskripsikan bagaimana konten HTML ditampilkan secara visual.

Menambahkan CSS ke HTML

  1. Internal: Menyimpan CSS di dalam file HTML menggunakan tag <style> di bagian <head>.
  2. Eksternal: Menyimpan CSS di file terpisah dan menghubungkannya menggunakan tag <link>.
  3. Inline: Menyimpan CSS di atribut style pada tag HTML (tidak direkomendasikan).

Komentar dalam CSS

  • Cara membuat komentar: /* komentar */

ID dan Class

  • ID: Menggunakan # di depan nama ID untuk men-target elemen unik.
  • Class: Menggunakan . di depan nama class untuk men-target beberapa elemen.

Selector

  • Simple Selectors: Memilih elemen berdasarkan tag, id, atau class.
  • Kombinators: Memilih elemen berdasarkan relasi antar elemen, misalnya descendant selector, child selector, dan sibling selector.
  • Atribut Selector: Memilih elemen berdasarkan atribut yang ada pada tag HTML.

Mengatur Teks

  • Color: Mengubah warna teks.
  • Text Alignment: Mengubah perataan teks dengan text-align.
  • Text Decoration: Menambahkan garis bawah, atas, atau coret pada teks.
  • Text Transform: Mengubah teks menjadi uppercase, lowercase, atau capitalize.

Box Model

  • Setiap elemen memiliki box model yang terdiri dari:
    • Konten (content)
    • Padding
    • Border
    • Margin

Debugging dengan Browser

  • Menggunakan fitur inspect di browser untuk melihat box model dan CSS yang diterapkan.

Min dan Max Size

  • Menggunakan min-width, min-height, max-width, dan max-height untuk mengatur ukuran elemen.

Border

  • Mengubah border elemen dengan border, border-collapse, border-radius, dll.

Outline

  • Mirip dengan border, tetapi tidak mengambil ruang dalam layout.

Background

  • Mengubah latar belakang elemen dengan background-color dan background-image.

Opacity

  • Mengatur transparansi elemen dengan opacity.

Import dan Cascade

  • Menggunakan @import untuk mengimpor CSS dari file lain.
  • Memahami urutan cascade dalam CSS: User Agent, Author, User Style.

Layer

  • Menggunakan layer untuk menentukan prioritas CSS tanpa menggunakan !important.

Filter

  • Menggunakan filter untuk menambahkan efek pada elemen.

Konten

  • Mengubah isi elemen dengan content dan menggunakan pseudo-elements ::before dan ::after.

Counter

  • Membuat nomor otomatis menggunakan CSS counter.

Menyelesaikan Kelas CSS Dasar

  • Materi selanjutnya: CSS Layout dan JavaScript untuk interaksi halaman web.

Full transcript