CSS
CSS Cheat Sheet
Panduan lengkap CSS dalam bahasa Indonesia untuk referensi cepat
CSS Cheat Sheet Lengkap
Panduan lengkap CSS dalam bahasa Indonesia ini mencakup seluruh properti dan konsep penting CSS.
Dasar-dasar CSS
Cara Menerapkan CSS
/* CSS Eksternal - di file .css terpisah */
selector {
properti: nilai;
}Dihubungkan ke HTML dengan tag <link rel="stylesheet" href="style.css">
Selektor Dasar
/* Selektor Elemen */
p {
color: blue;
}
/* Selektor ID */
#idname {
color: red;
}
/* Selektor Class */
.classname {
color: green;
}
/* Selektor Universal */
- {
margin: 0;
padding: 0;
}
/* Selektor Atribut */
[type="text"] {
border: 1px solid gray;
}Selektor Kombinasi
/* Keturunan (semua elemen p di dalam div) */
div p {
color: blue;
}
/* Anak Langsung (elemen p yang langsung merupakan anak div) */
div > p {
color: red;
}
/* Elemen Setelahnya (elemen p setelah h1) */
h1 + p {
color: purple;
}
/* Elemen Berikutnya (semua elemen p setelah h1) */
h1 ~ p {
color: orange;
}Selektor Pseudo-class
/* Link yang belum dikunjungi */
a:link {
color: blue;
}
/* Link yang sudah dikunjungi */
a:visited {
color: purple;
}
/* Link saat kursor di atasnya */
a:hover {
color: red;
}
/* Link saat diklik */
a:active {
color: yellow;
}Selektor Pseudo-element
/* Huruf pertama */
p::first-letter {
font-size: 2em;
}
/* Baris pertama */
p::first-line {
font-weight: bold;
}
/* Sebelum elemen */
p::before {
content: "»";
}
/* Setelah elemen */
p::after {
content: "«";
}
/* Teks yang disorot */
p::selection {
background-color: yellow;
}Properti Teks
Pengaturan Font
/* Font Family */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: monospace;Properti Teks
/* Warna Teks */
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* Perataan Teks */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;Box Model
Margin dan Padding
/* Margin - Semua Sisi */
margin: 10px;
/* Margin - Individual Sisi */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
/* Margin - Shorthand (Atas, Kanan, Bawah, Kiri) */
margin: 10px 15px 20px 25px;
/* Margin - Shorthand (Atas&Bawah, Kanan&Kiri) */
margin: 10px 15px;
/* Margin Auto untuk Center Horizontal */
margin: 0 auto;Border
/* Border Width */
border-width: 1px;
border-top-width: 2px;
border-right-width: 3px;
border-bottom-width: 4px;
border-left-width: 5px;
/* Border Style */
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;
/* Border Color */
border-color: #000000;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;Box Sizing
/* Content Box (Default) */
box-sizing: content-box;
/* Lebar dan tinggi hanya untuk konten, tidak termasuk padding dan border */
/* Border Box */
box-sizing: border-box;
/* Lebar dan tinggi termasuk padding dan border */
/* Menerapkan Border Box ke Semua Elemen */
- {
box-sizing: border-box;
}Dimensi
/* Lebar & Tinggi */
width: 300px;
height: 200px;
width: 50%;
height: 50%;
/* Lebar & Tinggi Minimum */
min-width: 100px;
min-height: 100px;
/* Lebar & Tinggi Maksimum */
max-width: 500px;
max-height: 500px;Overflow
/* Overflow */
overflow: visible; /* Default - konten yang melebihi akan tetap ditampilkan */
overflow: hidden; /* Konten yang melebihi akan tersembunyi */
overflow: scroll; /* Selalu menampilkan scrollbar */
overflow: auto; /* Menampilkan scrollbar jika diperlukan */
/* Overflow-X dan Overflow-Y */
overflow-x: scroll;
overflow-y: hidden;Display dan Posisi
Display
display: block; /* Elemen blok, mengambil lebar penuh */
display: inline; /* Elemen inline, mengambil lebar sesuai konten */
display: inline-block; /* Kombinasi inline dan block */
display: none; /* Menyembunyikan elemen dari layout */
display: flex; /* Container Flexbox */
display: grid; /* Container Grid */
display: table; /* Perilaku seperti tabel
*/Position
position: static; /* Default */
position: relative; /* Relatif terhadap posisi normalnya */
position: absolute; /* Relatif terhadap ancestor bertipe positioned */
position: fixed; /* Relatif terhadap viewport */
position: sticky; /* Kombinasi relative dan fixed */Float dan Clear
/* Float */
float: left; /* Elemen mengambang ke kiri */
float: right; /* Elemen mengambang ke kanan */
float: none; /* Default, tidak mengambang */
/* Clear */
clear: left; /* Tidak ada float kiri */
clear: right; /* Tidak ada float kanan */
clear: both; /* Tidak ada float kiri dan kanan */
clear: none; /* Default, memungkinkan float di kedua sisi */
/* Clearfix (mengatasi collapsed parent dengan child yang di-float) */
.clearfix::after {
content: "";
display: table;
clear: both;
}Flexbox
Flexbox adalah model layout satu dimensi, cocok untuk layout baris atau kolom.
Container Flex
/* Mengaktifkan Flexbox */
display: flex;
display: inline-flex;
/* Arah Flex */
flex-direction: row; /* Default, kiri ke kanan */
flex-direction: row-reverse; /* Kanan ke kiri */
flex-direction: column; /* Atas ke bawah */
flex-direction: column-reverse; /* Bawah ke atas */Item Flex
/* Urutan Item */
order: 0; /* Default */
order: 1;
order: -1;
/* Faktor Pertumbuhan */
flex-grow: 0; /* Default */
flex-grow: 1; /* Mengambil ruang yang tersedia */
/* Faktor Penyusutan */
flex-shrink: 1; /* Default */
flex-shrink: 0; /* Tidak menyusut */Grid
Grid adalah sistem layout dua dimensi, ideal untuk layout kompleks dengan baris dan kolom.
Container Grid
/* Mengaktifkan Grid */
display: grid;
display: inline-grid;
/* Grid Template Columns */
grid-template-columns: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 100px auto 100px;
grid-template-columns: minmax(100px, 1fr) 2fr 1fr;
/* Grid Template Rows */
grid-template-rows: 100px 100px;
grid-template-rows: 1fr 2fr;
grid-template-rows: repeat(2, 100px);
grid-template-rows: minmax(100px, auto);
/* Grid Template Areas */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";Item Grid
/* Grid Column */
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3; /* start / end */
grid-column: 1 / span 2; /* start / span */
grid-column: 1 / -1; /* start sampai akhir */
/* Grid Row */
grid-row-start: 1;
grid-row-end: 3;
grid-row: 1 / 3;
grid-row: 1 / span 2;
grid-row: 1 / -1;Background dan Warna
Background
/* Background Color */
background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);
background-color: transparent;
/* Background Image */
background-image: url('image.jpg');
background-image: linear-gradient(to right, red, yellow);
background-image: radial-gradient(circle, red, yellow, green);
/* Background Repeat */
background-repeat: repeat; /* Default */
background-repeat: repeat-x; /* Horizontal saja */
background-repeat: repeat-y; /* Vertikal saja */
background-repeat: no-repeat; /* Tidak berulang */Warna dan Opacity
/* Format Warna */
color: red; /* Nama warna */
color: #ff0000; /* Hex */
color: #f00; /* Hex singkat */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA dengan alpha */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA dengan alpha */
/* Opacity */
opacity: 1; /* Sepenuhnya tampak */
opacity: 0.5; /* Semi-transparan */
opacity: 0; /* Sepenuhnya transparan */Transformasi, Transisi, dan Animasi
Transformasi
/* Translate (Geser) */
transform: translateX(20px);
transform: translateY(20px);
transform: translate(20px, 20px);
transform: translate3d(20px, 20px, 20px);
/* Scale (Skala) */
transform: scaleX(1.5);
transform: scaleY(1.5);
transform: scale(1.5); /* X dan Y */
transform: scale(1.5, 2); /* X dan Y berbeda */
transform: scale3d(1.5, 1.5, 1.5);Transisi
/* Properti Transisi */
transition-property: all;
transition-property: width, height;
transition-property: transform;
/* Durasi Transisi */
transition-duration: 1s;
transition-duration: 500ms;