Pemrograman
Pembelajaran CSS Dasar
1. Pembelajaran CSS Dasar
Apa itu CSS?
CSS (Cascading Style Sheets) adalah bahasa stylesheet
yang digunakan untuk mengontrol tampilan dan tata letak
elemen HTML. Dengan CSS, Anda dapat mengatur warna,
font, jarak, ukuran, dan berbagai properti visual
lainnya untuk membuat halaman web lebih menarik dan
terorganisir.
2. Sintaks Dasar CSS
CSS terdiri dari tiga komponen utama:
- Selector: Elemen HTML yang ingin
di-style.
- Deklarasi: Blok kode yang berisi
properti dan nilai.
- Properti: Karakteristik spesifik yang
ingin diubah.
Contoh sintaks CSS:
3. jenis-jenis Selector
Ada beberapa jenis selector yang umum digunakan:
1. Element Selector: Memilih elemen
berdasarkan tag HTML.
2. Class Selector: Memilih elemen
berdasarkan class.
3. ID Selector: Memilih elemen
berdasarkan ID.
4. Combinator Selector: Memilih elemen
berdasarkan hubungannya dengan elemen lain.
4. Box Model
Setiap elemen HTML dianggap sebagai sebuah kotak (box)
yang terdiri dari:
- Content: Isi elemen.
- Padding: Ruang antara content dan
border.
- Border: Garis tepi elemen.
- Margin: Ruang di luar border.
Contoh penggunaan Box Model:
5. Layout dengan Flexbox
Flexbox adalah model layout yang memudahkan pengaturan
tata letak elemen secara fleksibel dan responsif.
Contoh penggunaan Flexbox:
6. Media Queries untuk Responsive Design
Media queries memungkinkan Anda membuat tampilan yang
responsif untuk berbagai ukuran layar.
Contoh penggunaan Media Queries:
7. Transisi dan Animasi Dasar
CSS memungkinkan Anda membuat efek transisi dan animasi
sederhana.
Contoh transisi:
Contoh animasi:
8. Best Practices CSS
1. Gunakan
BEM (Block Element Modifier) untuk
naming convention.
2. Manfaatkan CSS Variables untuk nilai
yang reusable.
3. Hindari penggunaan !important yang
berlebihan.
4. Gunakan preprocessor seperti
Sass atau Less untuk
CSS yang lebih terstruktur.
5. Terapkan pendekatan
mobile-first untuk desain responsif.
0 komentar