Catatan Kelas CSS Dasar

Pengenalan

• Nama pengajar: Eko Kurniawan
• Pengalaman: 12 tahun sebagai technical architect di e-commerce Indonesia.
• Platform untuk diskusi: Telegram, sosial media Programmer Zaman Now.
• Prasyarat: Mengikuti kelas sebelumnya tentang HTTP dan HTML.

Persiapan Belajar CSS

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

Apa Itu CSS?

• CSS: Cascading Style Sheets.
• Digunakan untuk memberi style dan layout pada konten HTML.
• HTML: Struktur konten web, CSS: Penampilan konten.

Menambahkan CSS ke HTML

Cara Menambahkan CSS

1. Internal: Menggunakan tag <style> dalam file HTML.
2. Eksternal: Menggunakan file CSS terpisah dan menghubungkannya dengan tag <link>.
3. Inline: Menggunakan atribut style pada elemen HTML (tidak direkomendasikan).

Struktur Dasar CSS

• Format CSS: selector { property: value; }
• Contoh: Mengubah warna dan ukuran font.

Komentar dalam CSS

• Komentar ditulis dengan /* komentar */

Pemilihan Elemen

Menggunakan Selector

• ID Selector: Menggunakan # di depan ID.
• Class Selector: Menggunakan . di depan class.
• Type Selector: Menggunakan nama tag HTML.
• Multiple Selectors: Menggunakan , sebagai pemisah.

Kombinator Selector

• Descendant Selector: Memilih elemen anak.
• Child Selector: Memilih elemen anak langsung.
• Adjacent Sibling Selector: Memilih elemen yang sejajar.
• General Sibling Selector: Memilih semua sibling.

Atribut Selector

• Memilih elemen berdasarkan atribut yang dimiliki.

Warna dalam CSS

• Menggunakan: nama warna, hex, RGB, HSL.

Teks dalam CSS

Properti Teks

• text-align: Mengatur rata teks.
• text-decoration: Mengatur garis bawah, tengah, atau atas.
• text-transform: Mengubah huruf menjadi uppercase, lowercase, atau capitalize.
• letter-spacing, line-height, word-spacing, white-space: Mengatur jarak antar huruf, baris, dan kata.

Box Model

• Margin: Jarak luar elemen.
• Border: Garis tepi elemen.
• Padding: Jarak dalam elemen, antara konten dan border.
• Content: Isi dari elemen.

Debugging dengan Browser

• Menggunakan fitur inspect untuk melihat box model elemen.

Min dan Max Size

• Mengatur ukuran minimum dan maksimum elemen menggunakan min-height, min-width, max-height, max-width.

Border di CSS

Mengatur Border

• Menggunakan border, border-style, border-width, et cetera.
• Menggunakan border-collapse untuk membuat border bertemu.

Outline

• Mirip border, tetapi tidak mengambil ruang dan tidak bisa diatur radius-nya.

Background

Background Color dan Image

• Menggunakan background-color untuk mengatur warna.
• Menggunakan background-image untuk menambahkan gambar sebagai latar belakang.

Layer dan Cascade

• Memahami urutan prioritas CSS: user agent, author, dan user style sheets.

Filter

• Menambahkan efek visual seperti blur, brightness, grayscale, dsb., menggunakan filter.

Import CSS

• Menggunakan @import untuk mengambil CSS dari file lain.

CSS Layout

• Materi selanjutnya tentang tata letak menggunakan CSS.

Penutup

• Materi CSS dasar telah selesai. Selanjutnya akan dibahas CSS layout dan JavaScript untuk interaksi web.
• Diskusi bisa dilakukan di Discord atau komentar.