CSS3 Cheat Sheet
Referensi cepat CSS3 properties, selectors, flexbox, grid, animations, dan modern techniques. Must-have buat frontend developer.
Silakan
login atau
daftar untuk membaca cheat sheet ini.
Baca Cheat Sheet Lengkap
Login atau daftar akun gratis 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.
/* 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 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
#Variables (Custom Properties)
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-size
CSS 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:
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;
.5
);
/* Modern */
color: oklch(60% 0.15 30);
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-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);
opacity: 0.5; /* 0 (transparent) to 1 (opaque) */
/* Inset shorthand */
inset: 10px 20px 10px 20px; /* top right bottom left */
/* Z-index */
z-index: 10;
z-index: -1;
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;
}
fr
200
px
;
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 */
}
: 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;
;
/* Chrome/Safari */
}
/* Scroll behavior */
scroll-behavior: smooth;
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);
: 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);
{
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 */
);
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;
));
/* Multiple filters */
filter: blur(2px) brightness(120%) contrast(110%);
/* Backdrop filter (blur background) */
backdrop-filter: blur(10px);
(
--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;
}
height: calc(100vh - 60px);
@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 { }
: 5cqi;
/* 5% container inline */
: section;
content: counter(section) ". ";
}
: wait;
cursor: text;
cursor: crosshair;
cursor: url('cursor.png'), auto;
-1
px
;
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;
}
}
/* Required even if empty */
}
.element::after {
content: "";
display: block;
width: 100%;
}
/* 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;
}
::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;
}
!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;
}
}
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 */
#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;
}
