Nama : Muchammad Ikfani Difangga

NIM : 220602011
Kelas : Informatika A Pagi 22

Tugas Summary CSS

1. Pengenalan CSS
Pengertian CSS: Cascading Style Sheets (CSS) adalah bahasa pemrograman yang
digunakan untuk menata tampilan halaman web.

Fungsi CSS:

 Memisahkan konten dari presentasi.

 Mengontrol tampilan elemen HTML seperti font, warna, tata letak, dan lainnya.
 Meningkatkan konsistensi dan kemudahan dalam pengembangan web.

Manfaat CSS:

 Meningkatkan estetika dan pengalaman pengguna.

 Mempermudah pemeliharaan dan update website.
 Meningkatkan kecepatan loading halaman.

2. Sintaks dan Selektor CSS

Jenis-jenis Selektor CSS:

 Selektor universal (*)

 Selektor elemen (h1, p, img, dll.)
 Selektor ID (#id)
 Selektor kelas (.class)
 Selektor atribut ([attribute])
 Selektor child (selector > child)
 Selektor descendant (selector descendant)
 Selektor sibling (selector ~ sibling)

Kombinasi Selektor CSS:

 Dapat menggunakan beberapa selektor sekaligus untuk menargetkan elemen

yang lebih spesifik.
  Contoh: h1.judul + p { font-weight: bold; }

3. Properti CSS
Jenis-jenis Properti CSS:

 Properti teks (font, color, text-decoration, dll.)

 Properti tata letak (margin, padding, border, display, position, float, dll.)
 Properti dimensi (width, height, max-width, min-width, dll.)
 Properti latar belakang (background-color, background-image, background-
position, dll.)
 Properti lainnya (visibility, opacity, z-index, transition, transform, dll.)

Nilai Properti CSS:

 Dapat berupa nilai numerik (misalnya, 10px, 20%, 0.5)

 Dapat berupa nilai kata kunci (misalnya, bold, red, inherit)
 Dapat berupa fungsi CSS (misalnya, rgb(255, 0, 0), calc(50% - 20px))

4. Box Model
Konsep Box Model:

 Setiap elemen HTML diibaratkan sebagai kotak dengan konten, padding,

border, dan margin.
 Dimensi elemen ditentukan oleh width, height, padding, dan border.
 Tata letak elemen ditentukan oleh margin, float, dan position.

Komponen Box Model:

 Content: Isi elemen (teks, gambar, dll.)

 Padding: Ruangan di sekitar konten.
 Border: Garis tepi di sekitar elemen.
 Margin: Ruangan di luar elemen.

5. Layout CSS
Teknik Layout CSS:

 Static layout: Tata letak statis dan tidak responsif.

 Float layout: Tata letak dengan elemen yang diposisikan dengan float.
 Flexbox layout: Tata letak yang fleksibel dan responsif.
  Grid layout: Tata letak dengan sistem grid untuk struktur yang lebih
kompleks.

Memilih Teknik Layout:

 Pertimbangkan kebutuhan desain dan tingkat responsivitas yang diperlukan.

 Flexbox dan grid layout lebih modern dan fleksibel dibandingkan float layout.

6. Responsive Design
Pengertian Responsive Design:

 Teknik desain web yang membuat website dapat beradaptasi dengan

berbagai perangkat (desktop, tablet, mobile).

Teknik Responsive Design:

 Media queries: Menentukan gaya CSS yang berbeda untuk perangkat dengan
layar berbeda.
 Fluid layout: Menggunakan persentase (%) untuk dimensi elemen dan font.
 Flexible images: Menggunakan gambar dengan rasio aspek yang dapat
diubah.

7. Preprocessor CSS
Pengertian Preprocessor CSS:

 Alat yang memperluas kemampuan CSS dengan fitur-fitur tambahan.

Contoh Preprocessor CSS:

 Sass: Menambahkan sintaks yang lebih ringkas dan variabel.

 LESS: Menambahkan mixin, nest, dan operasi matematika.
 Stylus: Menambahkan sintaks yang mirip dengan bahasa pemrograman lain.

Manfaat Preprocessor CSS:

 Meningkatkan organisasi dan kemudahan dalam menulis kode CSS.

 Mempermudah pengembangan
8. Framework CSS
Pengertian Framework CSS:

 Kerangka kerja yang menyediakan kumpulan kode CSS siap pakai untuk
pengembangan web.

Manfaat Framework CSS:

 Mempercepat proses pengembangan web.

 Memastikan konsistensi dan keterbakuan kode CSS.
 Menyediakan komponen UI yang siap pakai (seperti form, button, navbar).
 Responsif secara default (menyesuaikan tampilan di berbagai perangkat).

Contoh Framework CSS Populer:

 Bootstrap: Framework CSS yang paling populer, menawarkan grid system,

komponen UI, dan utilitas yang lengkap.
 Materialize: Framework yang terinspirasi oleh Material Design Google,
cocok untuk web dengan gaya modern dan minimalis.
 Semantic UI: Framework yang menggunakan nama kelas berbasis bahasa
Inggris untuk memudahkan pemahaman.
 Foundation: Framework dengan pendekatan mobile-first, fokus pada
pengalaman pengguna di perangkat mobile.
 Tailwind CSS: Framework utility-first yang menyediakan kelas CSS untuk
berbagai properti, menawarkan fleksibilitas tinggi.

9. Tips dan Trik menulis CSS

 Pahami konsep Flexbox dan Grid layout untuk membuat tata letak yang
fleksibel dan responsif.
 Belajar tentang animasi CSS untuk menambahkan efek interaktif pada
halaman web.
 Menggunakan media queries untuk membuat website responsif dan
menyesuaikan tampilan pada perangkat yang berbeda.
 Membuat fungsi atau mixin dengan preprocessor CSS untuk menerapkan
gaya yang kompleks secara berulang.