CSS3 Cheat Sheet - BelajarKoding | BelajarKodingCSS3 Cheat Sheet
Referensi cepat CSS3 properties, selectors, flexbox, grid, animations, dan modern techniques. Must-have buat frontend developer.
Lanjutkan Membaca
Daftar gratis untuk akses penuh ke semua artikel dan cheat sheet. Cepat, mudah, dan tanpa biaya!
Akses Tanpa Batas
Baca semua artikel dan cheat sheet kapan pun kamu mau
Bookmark Konten
Simpan artikel dan roadmap favoritmu untuk dibaca nanti
Gratis Selamanya
Tidak ada biaya tersembunyi, 100% gratis
Dengan mendaftar, kamu setuju dengan syarat dan ketentuan kami
#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;
}
