Referensi cepat CSS3 properties, selectors, flexbox, grid, animations, dan modern techniques. Must-have buat frontend developer.
Login atau daftar akun gratis untuk membaca cheat sheet ini.
Selector adalah cara untuk memilih elemen HTML yang ingin kita beri style. Ada berbagai jenis selector untuk berbagai kebutuhan.
/* Element */
p { }
/* Class */
.classname { }
/* ID */
#idname { }
/* Universal */
Box model adalah konsep dasar yang menjelaskan bagaimana elemen HTML dihitung ukurannya, termasuk konten, padding, border, dan margin.
/* Width & Height */
width: 300px;
height: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
max-height: 500px;
/* Box sizing */
CSS menyediakan berbagai cara untuk mendefinisikan warna, mulai dari nama warna sederhana hingga format hex, RGB, HSL, dan yang lebih modern.
/* Named */
color: red;
/* Hex */
color: #ff0000;
color: #f00; /* Shorthand */
/* RGB */
color: rgb(255, 0, 0);
/* RGBA */
color: rgba(255, 0, 0, 0.5);
/* HSL */
color: hsl(0, 100%, 50%);
/* HSLA */
color: hsla(0, 100%, 50%, 0
Typography mengatur tampilan teks di website, termasuk jenis font, ukuran, warna, dan berbagai efek teks lainnya.
/* Font family */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Open Sans', sans-serif;
/* Font size */
Background mengatur tampilan latar belakang elemen, bisa berupa warna solid, gambar, atau gradient yang menarik.
/* Background color */
background-color: #f0f0f0;
/* Background image */
background-image: url('image.jpg');
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
Display mengatur bagaimana elemen ditampilkan di halaman web, apakah sebagai block, inline, flex, atau grid.
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: none;
display: contents;
/* Visibility */
visibility: visible;
visibility: hidden; /* Takes up space */
/* Opacity */
Position mengatur posisi elemen di halaman, bisa relative terhadap posisi normalnya atau terhadap elemen lain.
/* Position */
position: static; /* Default */
position: relative; /* Relative to normal position */
position: absolute; /* Relative to nearest positioned ancestor */
position: fixed; /* Relative to viewport */
position: sticky; /* Hybrid */
/* Offset */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
Flexbox adalah sistem layout modern yang memudahkan pengaturan tata letak elemen dalam satu dimensi (baris atau kolom).
/* Container */
.container {
display: flex;
/* Direction */
flex-direction: row; /* row, row-reverse, column, column-reverse */
/* Wrap */
CSS Grid adalah sistem layout yang sangat powerful untuk mengatur tata letak elemen dalam dua dimensi (baris dan kolom).
/* Container */
.container {
display: grid;
/* Columns */
grid-template-columns: 200px 1
Spacing mengatur jarak antar elemen, sedangkan sizing mengatur ukuran elemen dengan berbagai unit yang tersedia.
/* Width & Height */
width: 100%;
width: 300px;
width: 50vw;
width: auto;
width: fit-content;
width: min-content;
width: max-content;
/* Min & Max */
min-width: 200px;
max-width: 1200px;
min-height
Overflow mengatur apa yang terjadi ketika konten elemen terlalu besar untuk muat dalam wadahnya.
overflow: visible; /* Default */
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow-x: auto;
overflow-y: scroll;
/* Hide scrollbar */
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar {
display: none
Border adalah garis tepi elemen, sedangkan shadow menambahkan efek bayangan yang membuat elemen terlihat lebih menonjol.
/* Border */
border: 2px solid black;
border-radius: 10px;
border-radius: 50%; /* Circle */
border-top-left-radius: 10px;
/* Box shadow */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* Multiple */
Transition membuat perubahan style terjadi secara bertahap, bukan tiba-tiba, sehingga terlihat lebih halus.
/* Transition */
transition: property duration timing-function delay;
transition: all 0.3s ease;
transition: transform 0.3s ease, opacity 0.2s linear;
/* Properties */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function
Animation memungkinkan kita membuat efek gerakan yang kompleks dengan mendefinisikan keyframe dan properti lainnya.
/* Define keyframes */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide
Transform mengubah bentuk, posisi, dan ukuran elemen tanpa mempengaruhi layout halaman lainnya.
/* Translate (move) */
transform: translateX(50px);
transform: translateY(20px);
transform: translate(50px, 20px);
transform: translateZ(10px);
transform: translate3d(50px, 20px, 10px);
/* Scale */
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5
Filter memungkinkan kita menerapkan efek visual seperti blur, brightness, atau color changes pada elemen.
filter: blur(5px);
filter: brightness(150%);
filter: contrast(200%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5
CSS Variables memungkinkan kita menyimpan nilai yang bisa digunakan ulang di seluruh stylesheet, membuat kode lebih mudah di-maintain.
/* Define */
:root {
--primary-color: #3498db;
--spacing: 1rem;
--font-size-large: 2rem;
}
/* Use */
.element {
color: var
Fungsi CSS modern seperti clamp, min, max, dan calc memudahkan kita membuat layout yang responsif dan fleksibel.
/* clamp */
font-size: clamp(1rem, 2.5vw, 2rem); /* min, preferred, max */
width: clamp(300px, 50%, 800px);
/* min */
width: min(100%, 1200px);
padding: min(5vw, 3rem);
/* max */
width: max(50%, 300px);
/* calc */
width: calc(100% - 80px);
font-size: calc(1rem + 0.5vw);
Media queries memungkinkan kita menerapkan style berbeda berdasarkan ukuran layar, orientasi, atau fitur device lainnya.
/* Mobile first */
@media (min-width: 768px) {
/* Tablet & up */
}
@media (min-width: 1024px) {
/* Desktop & up */
}
/* Desktop first */
Container queries mirip dengan media queries, tetapi berdasarkan ukuran container parent, bukan viewport.
/* Define container */
.container {
container-type: inline-size;
container-name: card;
}
/* Query */
@container card (min-width: 400px) {
.element {
/* Styles */
}
}
/* Container units */
width: 50cqw; /* 50% container width */
font-sizeCSS untuk list mengatur tampilan bullet points, numbering, dan styling untuk ordered dan unordered lists.
/* List style */
list-style-type: disc; /* disc, circle, square, decimal, none */
list-style-position: inside; /* inside, outside */
list-style-image: url('marker.png');
/* Shorthand */
list-style: square inside;
/* Counter */
counter-reset: section;
.item::before {
counter-increment
Cursor mengatur bentuk kursor mouse saat mengarah ke elemen tertentu, memberikan feedback visual kepada user.
cursor: default;
cursor: pointer;
cursor: move;
cursor: not-allowed;
cursor: grab;
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;
cursor: help;
cursor
User interaction mengatur bagaimana elemen merespons interaksi pengguna seperti selection dan pointer events.
/* Selection */
user-select: none;
user-select: text;
user-select: all;
/* Pointer events */
pointer-events: none;
pointer-events: auto;
/* Touch action */
touch-action: none;
touch-action: manipulation;Accessibility memastikan website bisa diakses oleh semua orang, termasuk yang menggunakan screen reader atau keyboard navigation.
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin:
Pseudo-elements memungkinkan kita menambahkan konten sebelum atau sesudah elemen menggunakan CSS.
.element::before {
content: "→ ";
content: url('icon.png');
content: attr(data-label);
content: counter(section);
content: "";
Common patterns adalah pola-pola CSS yang sering digunakan untuk membuat komponen UI yang umum seperti card, button, dan layout.
/* Center element */
.center {
display: flex;
justify-content: center;
align-items: center;
}
Reset CSS menghilangkan default styling browser, sedangkan normalize membuatnya konsisten di semua browser.
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Modern reset */
*,
*::before,
*
Print styles mengatur tampilan halaman saat dicetak, memastikan hasil cetak terlihat baik dan mudah dibaca.
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none
CSS memiliki berbagai unit ukuran yang bisa digunakan, dari absolute seperti px hingga relative seperti em, rem, dan vw.
/* Absolute */
px /* Pixels */
pt /* Points */
cm, mm /* Centimeters, millimeters */
/* Relative */
% /* Percentage */
em /* Relative to parent font-size */
Best practices CSS adalah panduan untuk menulis kode CSS yang baik, maintainable, dan performan.
/* Use box-sizing everywhere */
* {
box-sizing: border-box;
}
/* Mobile-first media queries */
@media (min-width: 768px) { }
/* Use CSS variables */
:root {
--primary: