Lewati ke konten utama
menjadi.dev
Frontend

CSS

Bahasa stylesheet untuk mengatur tampilan visual elemen HTML.

CSS (Cascading Style Sheets) adalah bahasa untuk menggambarkan presentasi dokumen HTML — warna, font, layout, animasi, dan semua aspek visual. CSS bekerja berdasarkan selector (menarget elemen HTML) dan declaration block (properti + nilai). Konsep kunci: Specificity (seberapa spesifik selector — ID > class > element), Cascade (urutan styling — later styles override earlier), Inheritance (properti tertentu diwariskan ke child elements). CSS modern: Flexbox (layout 1D), Grid (layout 2D), Custom Properties (CSS variables), Container Queries, dan @layer untuk mengelola cascade. Preprocessor seperti Sass dan Less menambah fitur: variables, nesting, mixins, partials.

Contoh Kode

/* CSS modern dengan Flexbox dan Custom Properties */
:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing);
}

.card {
  display: flex;
  flex-direction: column;
  padding: calc(var(--spacing) * 2);
  border-radius: 8px;
  background: var(--primary-color);
}

Istilah Terkait