CSS3 Cheat Sheet

Referensi cepat CSS3 properties, selectors, flexbox, grid, animations, dan modern techniques. Must-have buat frontend developer.

CSS15 min read2.966 kata

Silakan login atau daftar untuk membaca cheat sheet ini.

#Selectors

Selector adalah cara untuk memilih elemen HTML yang ingin kita beri style. Ada berbagai jenis selector untuk berbagai kebutuhan.

css

/* Element */
p { }
 
/* Class */
.classname { }
 
/* ID */
#idname { }
 
/* Universal */
* { }
 
/* Multiple */
h1, h2, h3 { }
 
/* Descendant (space) */
div p { }
 
/* Child (>) */
div > p { }
 
/* Adjacent sibling (+) */
h1 + p { }
 
/* General sibling (~) */
h1 ~ p { }
 
/* Attribute */
[type] { }
[type="text"] { }
[class~="button"] { }
[href^="https"] { }
[href$=".pdf"] { }
[href*="google"] { }
 
/* Pseudo-classes */
:hover { }
:focus { }
:active { }
:visited { }
:link { }
:nth-child(2) { }
:nth-child(odd) { }
:nth-child(even) { }
:nth-child(3n) { }
:first-child { }
:last-child { }
:not(.exclude) { }
:disabled { }
:checked { }
:invalid { }
:valid { }
:empty { }
:root { }
 
/* Pseudo-elements */
::before { }
::after { }
::first-letter { }
::first-line { }
::selection { }
::placeholder { }

#Box Model

Box model adalah konsep dasar yang menjelaskan bagaimana elemen HTML dihitung ukurannya, termasuk konten, padding, border, dan margin.

css

/* Width & Height */
width: 300px;
height: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
max-height: 500px;
 
/* Box sizing */
box-sizing: content-box;   /* Default */
box-sizing: border-box;    /* Include padding & border */
 
/* Padding */
padding: 20px;
padding: 10px 20px;          /* vertical horizontal */
padding: 10px 15px 20px 25px;     /* top right bottom left */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
 
/* Margin */
margin: 20px;
margin: 10px auto;           /* Horizontal center */
margin: 10px 15px 20px 25px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
 
/* Border */
border: 2px solid black;
border-width: 2px;
border-style: solid;          /* solid, dashed, dotted, double, groove, ridge, inset, outset, none */
border-color: black;
border-top: 1px solid red;
border-radius: 10px;
border-radius: 10px 20px 30px 40px;  /* top-left, top-right, bottom-right, bottom-left */
 
/* Outline */
outline: 2px solid blue;
outline-offset: 5px;

#Colors

CSS menyediakan berbagai cara untuk mendefinisikan warna, mulai dari nama warna sederhana hingga format hex, RGB, HSL, dan yang lebih modern.

css

/* 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.5);
 
/* Modern */
color: oklch(60% 0.15 30);

#Typography

Typography mengatur tampilan teks di website, termasuk jenis font, ukuran, warna, dan berbagai efek teks lainnya.

css

/* Font family */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Open Sans', sans-serif;
 
/* Font size */
font-size: 16px;
font-size: 1rem;
font-size: 1.5em;
font-size: clamp(1rem, 2.5vw, 2rem);
 
/* Font weight */
font-weight: normal;          /* 400 */
font-weight: bold;           /* 700 */
font-weight: 100;           /* Thin */
font-weight: 900;           /* Black */
 
/* Font style */
font-style: normal;
font-style: italic;
font-style: oblique;
 
/* Text */
color: #333;
text-align: left;           /* left, right, center, justify */
text-decoration: none;         /* none, underline, overline, line-through */
text-transform: uppercase;       /* lowercase, uppercase, capitalize, none */
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.6;
text-indent: 50px;
 
/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 
/* White space */
white-space: normal;          /* normal, nowrap, pre, pre-wrap, pre-line */
word-wrap: break-word;
overflow-wrap: break-word;
 
/* Vertical align */
vertical-align: middle;        /* baseline, top, middle, bottom, sub, super */
 
/* Text overflow */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
 
/* Multi-line ellipsis */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

#Background

Background mengatur tampilan latar belakang elemen, bisa berupa warna solid, gambar, atau gradient yang menarik.

css

/* Background color */
background-color: #f0f0f0;
 
/* Background image */
background-image: url('image.jpg');
background-repeat: no-repeat;     /* repeat, repeat-x, repeat-y, no-repeat */
background-position: center;      /* top, bottom, left, right, center, 50% 50% */
background-size: cover;        /* cover, contain, 100px 200px, 50% */
background-attachment: fixed;     /* scroll, fixed, local */
 
/* Shorthand */
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
 
/* Multiple backgrounds */
background-image: url('img1.png'), url('img2.png');
background-position: top left, bottom right;
 
/* Gradients */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to right, red 0%, blue 50%, green 100%);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green, blue, red);

#Display

Display mengatur bagaimana elemen ditampilkan di halaman web, apakah sebagai block, inline, flex, atau grid.

css

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 */
opacity: 0.5;             /* 0 (transparent) to 1 (opaque) */

#Position

Position mengatur posisi elemen di halaman, bisa relative terhadap posisi normalnya atau terhadap elemen lain.

css

/* 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;
 
/* Inset shorthand */
inset: 10px 20px 10px 20px;      /* top right bottom left */
 
/* Z-index */
z-index: 10;
z-index: -1;

#Flexbox

Flexbox adalah sistem layout modern yang memudahkan pengaturan tata letak elemen dalam satu dimensi (baris atau kolom).

css

/* Container */
.container {
 display: flex;
 
 /* Direction */
 flex-direction: row;         /* row, row-reverse, column, column-reverse */
 
 /* Wrap */
 flex-wrap: nowrap;          /* nowrap, wrap, wrap-reverse */
 
 /* Shorthand */
 flex-flow: row wrap;
 
 /* Main axis (justify) */
 justify-content: flex-start;     /* flex-start, flex-end, center, space-between, space-around, space-evenly */
 
 /* Cross axis (align) */
 align-items: stretch;        /* flex-start, flex-end, center, stretch, baseline */
 
 /* Multiple lines */
 align-content: flex-start;
 
 /* Gap */
 gap: 1rem;
 column-gap: 1rem;
 row-gap: 0.5rem;
}
 
/* Items */
.item {
 flex-grow: 0;
 flex-shrink: 1;
 flex-basis: auto;
 
 /* Shorthand */
 flex: 0 1 auto;           /* grow shrink basis */
 flex: 1;               /* Common: 1 1 0 */
 flex: none;             /* 0 0 auto */
 
 /* Alignment */
 align-self: auto;          /* auto, flex-start, flex-end, center, stretch, baseline */
 
 /* Order */
 order: 0;
}

#CSS Grid

CSS Grid adalah sistem layout yang sangat powerful untuk mengatur tata letak elemen dalam dua dimensi (baris dan kolom).

css

/* Container */
.container {
 display: grid;
 
 /* Columns */
 grid-template-columns: 200px 1fr 200px;
 grid-template-columns: repeat(3, 1fr);
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 grid-template-columns: 1fr 2fr 1fr;
 
 /* Rows */
 grid-template-rows: 100px auto 50px;
 grid-auto-rows: minmax(100px, auto);
 
 /* Gap */
 gap: 1rem;
 column-gap: 2rem;
 row-gap: 1rem;
 
 /* Areas */
 grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
 
 /* Alignment (items) */
 justify-items: start;        /* start, end, center, stretch */
 align-items: start;
 
 /* Alignment (grid) */
 justify-content: start;
 align-content: start;
 
 /* Shorthand */
 place-items: center;         /* align-items justify-items */
 place-content: center;        /* align-content justify-content */
}
 
/* Items */
.item {
 /* Position */
 grid-column: 1 / 3;         /* Start / end */
 grid-column: span 2;         /* Span 2 columns */
 grid-row: 1 / 2;
 grid-row: span 1;
 
 /* Area */
 grid-area: header;
 
 /* Alignment */
 justify-self: start;
 align-self: start;
 place-self: center;         /* align-self justify-self */
}

#Spacing & Sizing

Spacing mengatur jarak antar elemen, sedangkan sizing mengatur ukuran elemen dengan berbagai unit yang tersedia.

css

/* 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: 100px;
max-height: 500px;
 
/* Aspect ratio */
aspect-ratio: 16 / 9;
aspect-ratio: 1;
 
/* Object fit (images, video) */
object-fit: cover;           /* cover, contain, fill, none, scale-down */
object-position: center;

#Overflow

Overflow mengatur apa yang terjadi ketika konten elemen terlalu besar untuk muat dalam wadahnya.

css

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;            /* Chrome/Safari */
}
 
/* Scroll behavior */
scroll-behavior: smooth;

#Border & Shadow

Border adalah garis tepi elemen, sedangkan shadow menambahkan efek bayangan yang membuat elemen terlihat lebih menonjol.

css

/* 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 */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow */
 
/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

#Transitions

Transition membuat perubahan style terjadi secara bertahap, bukan tiba-tiba, sehingga terlihat lebih halus.

css

/* 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: ease;   /* ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier() */
transition-delay: 0s;
 
/* Common timing functions */
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

#Animations

Animation memungkinkan kita membuat efek gerakan yang kompleks dengan mendefinisikan keyframe dan properti lainnya.

css

/* Define keyframes */
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
 
@keyframes slide {
 0% { transform: translateX(-100%); }
 50% { transform: translateX(0); }
 100% { transform: translateX(100%); }
}
 
/* Apply animation */
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: fadeIn 1s ease 0.5s infinite alternate forwards;
 
/* Properties */
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: 1;     /* Number or infinite */
animation-direction: normal;      /* normal, reverse, alternate, alternate-reverse */
animation-fill-mode: none;       /* none, forwards, backwards, both */
animation-play-state: running;     /* running, paused */

#Transforms

Transform mengubah bentuk, posisi, dan ukuran elemen tanpa mempengaruhi layout halaman lainnya.

css

/* 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);
transform: scale3d(2, 0.5, 1);
 
/* Rotate */
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 1, 45deg);
 
/* Skew */
transform: skew(20deg, 10deg);
transform: skewX(20deg);
transform: skewY(10deg);
 
/* Multiple */
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
 
/* Transform origin */
transform-origin: center;       /* Default */
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 20px 30px;
 
/* Perspective (3D) */
perspective: 1000px;

#Filters

Filter memungkinkan kita menerapkan efek visual seperti blur, brightness, atau color changes pada elemen.

css

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));
 
/* Multiple filters */
filter: blur(2px) brightness(120%) contrast(110%);
 
/* Backdrop filter (blur background) */
backdrop-filter: blur(10px);

#Variables (Custom Properties)

CSS Variables memungkinkan kita menyimpan nilai yang bisa digunakan ulang di seluruh stylesheet, membuat kode lebih mudah di-maintain.

css

/* Define */
:root {
 --primary-color: #3498db;
 --spacing: 1rem;
 --font-size-large: 2rem;
}
 
/* Use */
.element {
 color: var(--primary-color);
 padding: var(--spacing);
 font-size: var(--font-size-large);
 
 /* With fallback */
 color: var(--text-color, black);
}
 
/* Override in scope */
.dark-theme {
 --primary-color: #2980b9;
}

#Modern CSS Functions

Fungsi CSS modern seperti clamp, min, max, dan calc memudahkan kita membuat layout yang responsif dan fleksibel.

css

/* 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);
height: calc(100vh - 60px);

#Media Queries

Media queries memungkinkan kita menerapkan style berbeda berdasarkan ukuran layar, orientasi, atau fitur device lainnya.

css

/* Mobile first */
@media (min-width: 768px) {
 /* Tablet & up */
}
 
@media (min-width: 1024px) {
 /* Desktop & up */
}
 
/* Desktop first */
@media (max-width: 1023px) {
 /* Tablet & down */
}
 
/* Exact range */
@media (min-width: 768px) and (max-width: 1023px) {
 /* Tablet only */
}
 
/* Orientation */
@media (orientation: landscape) { }
@media (orientation: portrait) { }
 
/* Prefers */
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }
 
/* Hover capability */
@media (hover: hover) { }
@media (hover: none) { }
 
/* Print */
@media print { }

#Container Queries

Container queries mirip dengan media queries, tetapi berdasarkan ukuran container parent, bukan viewport.

css

/* 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-size: 5cqi;            /* 5% container inline */

#Lists

CSS untuk list mengatur tampilan bullet points, numbering, dan styling untuk ordered dan unordered lists.

css

/* 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: section;
 content: counter(section) ". ";
}

#Cursor

Cursor mengatur bentuk kursor mouse saat mengarah ke elemen tertentu, memberikan feedback visual kepada user.

css

cursor: default;
cursor: pointer;
cursor: move;
cursor: not-allowed;
cursor: grab;
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;
cursor: help;
cursor: wait;
cursor: text;
cursor: crosshair;
cursor: url('cursor.png'), auto;

#User Interaction

User interaction mengatur bagaimana elemen merespons interaksi pengguna seperti selection dan pointer events.

css

/* 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

Accessibility memastikan website bisa diakses oleh semua orang, termasuk yang menggunakan screen reader atau keyboard navigation.

css

/* Screen reader only */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border: 0;
}
 
/* Focus visible (keyboard nav) */
:focus-visible {
 outline: 2px solid blue;
 outline-offset: 2px;
}
 
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
 * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
 }
}

#Pseudo-elements Content

Pseudo-elements memungkinkan kita menambahkan konten sebelum atau sesudah elemen menggunakan CSS.

css

.element::before {
 content: "→ ";
 content: url('icon.png');
 content: attr(data-label);
 content: counter(section);
 content: "";             /* Required even if empty */
}
 
.element::after {
 content: "";
 display: block;
 width: 100%;
}

#Pattern Umum

Common patterns adalah pola-pola CSS yang sering digunakan untuk membuat komponen UI yang umum seperti card, button, dan layout.

css

/* Center element */
.center {
 display: flex;
 justify-content: center;
 align-items: center;
}
 
/* or */
.center {
 display: grid;
 place-items: center;
}
 
/* Full viewport height */
.full-height {
 min-height: 100vh;
}
 
/* Responsive container */
.container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1rem;
}
 
/* Card */
.card {
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 padding: 1.5rem;
}
 
/* Button reset */
button {
 background: none;
 border: none;
 padding: 0;
 font: inherit;
 cursor: pointer;
}
 
/* Image responsive */
img {
 max-width: 100%;
 height: auto;
 display: block;
}
 
/* Clearfix (for floats) */
.clearfix::after {
 content: "";
 display: table;
 clear: both;
}
 
/* Aspect ratio box (old way) */
.ratio-16-9 {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}
 
.ratio-16-9 > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
 
/* New way */
.ratio-16-9 {
 aspect-ratio: 16 / 9;
}

#Reset / Normalize

Reset CSS menghilangkan default styling browser, sedangkan normalize membuatnya konsisten di semua browser.

css

/* Basic reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
 
/* Modern reset */
*,
*::before,
*::after {
 box-sizing: border-box;
}
 
body {
 margin: 0;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
}
 
img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}
 
input, button, textarea, select {
 font: inherit;
}
 
p, h1, h2, h3, h4, h5, h6 {
 overflow-wrap: break-word;
}

#Print Styles

Print styles mengatur tampilan halaman saat dicetak, memastikan hasil cetak terlihat baik dan mudah dibaca.

css

@media print {
 * {
  background: transparent !important;
  color: black !important;
  box-shadow: none !important;
  text-shadow: none !important;
 }
 
 a, a:visited {
  text-decoration: underline;
 }
 
 a[href]::after {
  content: " (" attr(href) ")";
 }
 
 thead {
  display: table-header-group;
 }
 
 tr, img {
  page-break-inside: avoid;
 }
 
 img {
  max-width: 100% !important;
 }
 
 @page {
  margin: 2cm;
 }
 
 p, h2, h3 {
  orphans: 3;
  widows: 3;
 }
 
 h2, h3 {
  page-break-after: avoid;
 }
 
 .no-print {
  display: none;
 }
}

#Units

CSS memiliki berbagai unit ukuran yang bisa digunakan, dari absolute seperti px hingga relative seperti em, rem, dan vw.

css

/* Absolute */
px                   /* Pixels */
pt                   /* Points */
cm, mm                 /* Centimeters, millimeters */
 
/* Relative */
%                   /* Percentage */
em                   /* Relative to parent font-size */
rem                  /* Relative to root font-size */
ch                   /* Width of "0" character */
ex                   /* Height of "x" character */
 
/* Viewport */
vw                   /* 1% of viewport width */
vh                   /* 1% of viewport height */
vmin                  /* 1% of smaller dimension */
vmax                  /* 1% of larger dimension */
svw, svh                /* Small viewport units */
lvw, lvh                /* Large viewport units */
dvw, dvh                /* Dynamic viewport units */
 
/* Container */
cqw                  /* Container query width */
cqh                  /* Container query height */
cqi                  /* Container query inline */
cqb                  /* Container query block */

#Best Practices

Best practices CSS adalah panduan untuk menulis kode CSS yang baik, maintainable, dan performan.

css

/* Use box-sizing everywhere */
* {
 box-sizing: border-box;
}
 
/* Mobile-first media queries */
@media (min-width: 768px) { }
 
/* Use CSS variables */
:root {
 --primary: #3498db;
}
 
/* Avoid !important */
/* Use specific selectors instead */
 
/* Group related properties */
.element {
 /* Display */
 display: flex;
 
 /* Position */
 position: relative;
 
 /* Size */
 width: 100%;
 
 /* Typography */
 font-size: 1rem;
 
 /* Colors */
 background: white;
 color: black;
}

Baca Cheat Sheet Lengkap

CSS Frontend Web Development