Selektor Elemen (Tag)

Memilih elemen berdasarkan nama tag-nya.

Contoh Kode:

/* Memberi warna biru pada semua paragraf */
p {
    color: blue;
}

Selektor Class

Memilih elemen berdasarkan atribut class-nya. Selektor ini diawali dengan tanda titik (.). Satu class bisa digunakan oleh banyak elemen.

Contoh Kode:

/* HTML */
<p class="sorot">Teks ini disorot.</p>

/* CSS */
.sorot {
    background-color: yellow;
    color: black;
}

Hasil Tampilan:

Selektor ID

Memilih satu elemen unik berdasarkan atribut id-nya. Selektor ini diawali dengan tanda pagar (#). Sebuah ID harus unik dalam satu halaman.

Contoh Kode:

/* HTML */
<h1 id="judul-utama">Judul Halaman</h1>

/* CSS */
#judul-utama {
    border-bottom: 2px solid #4a90e2;
}

Hasil Tampilan:

Box Model: margin, padding, border

Setiap elemen HTML dapat dianggap sebagai sebuah kotak. Box model adalah aturan yang mengatur ukuran dan spasi kotak ini.
• Padding: Ruang di antara konten dan border (batas).
• Border: Garis yang mengelilingi padding dan konten.
• Margin: Ruang di luar border, yang memisahkannya dari elemen lain.

Contoh Kode:

.kotak-contoh {
    background-color: #4a90e2;
    color: white;
    border: 5px solid #1e5fa4;
    padding: 20px;
    margin: 30px;
    width: 250px;
}

Hasil Tampilan:

Properti Font dan Teks Umum

• font-family: Menentukan jenis font (misal: Arial, 'Times New Roman').
• font-size: Mengatur ukuran teks (misal: 16px, 1.2em).
• font-weight: Mengatur ketebalan teks (misal: normal, bold, 700).
• color: Mengatur warna teks.
• text-align: Mengatur perataan teks (misal: left, center, right).
• line-height: Mengatur jarak antar baris teks untuk kenyamanan membaca.

Contoh Kode:

.artikel-utama {
    font-family: Georgia, serif;
    font-size: 18px;
    color: #333333;
    line-height: 1.7;
    text-align: justify;
}

Hasil Tampilan:

Flexbox (Flexible Box Layout)

Flexbox dirancang untuk layout satu dimensi (baik sebagai baris atau kolom). Sangat ideal untuk menata item dalam sebuah kontainer, seperti item navigasi, kartu, atau menyusun elemen secara vertikal di tengah.

Contoh Kode:

.flex-container {
    display: flex;
    justify-content: space-around; /* Menyebar item dengan spasi merata */
    align-items: center;       /* Menengahkan item secara vertikal */
    background-color: #333;
    padding: 10px;
    height: 100px;
}

.flex-item {
    background-color: #4a90e2;
    color: white;
    padding: 20px;
}

Hasil Tampilan:

Grid Layout

Grid dirancang untuk layout dua dimensi (baris dan kolom secara bersamaan). Ini sangat kuat untuk membuat tata letak halaman utama yang kompleks, seperti layout majalah atau dasbor aplikasi.

Contoh Kode:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Tiga kolom dengan lebar berbeda */
    gap: 15px; /* Jarak antar item */
}

.grid-item {
    background-color: #d0021b;
    color: white;
    padding: 20px;
    text-align: center;
}

Hasil Tampilan:

Pseudo-classes

Pseudo-class adalah kata kunci yang ditambahkan ke selektor untuk menentukan keadaan khusus dari elemen tersebut. Yang paling umum adalah :hover, yang aktif saat kursor mouse berada di atas elemen.

Contoh Kode:

.tombol-interaktif {
    background-color: #4a90e2;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Gaya ini akan diterapkan saat mouse berada di atas tombol */
.tombol-interaktif:hover {
    background-color: #1e5fa4;
}

Hasil Tampilan:

Transitions

Properti transition memungkinkan Anda untuk mengontrol kecepatan animasi saat properti CSS berubah. Ini membuat perubahan (seperti pada saat :hover) menjadi mulus, bukan instan.

Contoh Kode:

.kotak-transisi {
    width: 100px;
    height: 100px;
    background-color: #d0021b;
    /* Terapkan transisi pada properti 'background-color' dan 'transform' */
    /* Transisi akan memakan waktu 0.4 detik */
    transition: background-color 0.4s, transform 0.4s;
}

.kotak-transisi:hover {
    background-color: #7f000f;
    transform: scale(1.1); /* Memperbesar kotak sedikit */
}

Hasil Tampilan:

Desain Responsif dengan Media Queries

Media query adalah fitur CSS yang memungkinkan Anda menerapkan gaya hanya jika kondisi tertentu terpenuhi (misalnya, lebar layar browser di bawah atau di atas ukuran tertentu). Ini adalah dasar dari desain web responsif.

Contoh Kode:

.kontainer-responsif {
    display: flex;
    flex-direction: row; /* Awalnya item berjajar ke samping */
}

/* Aturan ini hanya berlaku jika lebar layar 600px atau kurang */
@media (max-width: 600px) {
    .kontainer-responsif {
        flex-direction: column; /* Ubah susunan menjadi ke bawah */
    }
}

Hasil Tampilan:

Positioning

Properti position menentukan bagaimana sebuah elemen diposisikan dalam dokumen. Nilai utamanya adalah static (default), relative, absolute, dan fixed. Kombinasi relative dan absolute sangat umum digunakan.

• position: relative;: Elemen diposisikan relatif terhadap posisi normalnya. Elemen ini menjadi "konteks" untuk elemen anak yang memiliki position: absolute.
• position: absolute;: Elemen diposisikan relatif terhadap kontainer induk terdekat yang memiliki position: relative.

Contoh Kode:

.kontainer-posisi {
    position: relative;
    width: 200px;
    height: 150px;
    background-color: #eee;
}

.elemen-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(208, 2, 27, 0.8);
    color: white;
    padding: 5px 10px;
}

Hasil Tampilan:

CSS Variables (Custom Properties)

Variables memungkinkan Anda menyimpan nilai (seperti warna atau ukuran spasi) di satu tempat dan menggunakannya kembali di seluruh stylesheet Anda. Didefinisikan dengan dua tanda hubung (--) dan dipanggil dengan fungsi var(). Ini membuat kode lebih mudah dikelola.

Contoh Kode:

:root {
    --warna-utama: #4a90e2;
    --warna-teks: #ffffff;
}

.tombol-tema {
    background-color: var(--warna-utama);
    color: var(--warna-teks);
    border: 2px solid var(--warna-utama);
}

.tombol-tema:hover {
    background-color: var(--warna-teks);
    color: var(--warna-utama);
}

Hasil Tampilan:

Pseudo-elements (::before & ::after)

Pseudo-elements memungkinkan Anda untuk menata bagian tertentu dari elemen, atau menambahkan konten dekoratif sebelum (::before) atau sesudah (::after) konten elemen tanpa mengubah HTML.

Contoh Kode:

.kutipan {
    position: relative;
    padding-left: 30px;
    font-style: italic;
}

.kutipan::before {
    content: '“'; /* Konten yang ditambahkan */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3em;
    color: #4a90e2;
}

Hasil Tampilan:

Transformasi 2D dan 3D

Properti transform memungkinkan Anda untuk mengubah bentuk, ukuran, dan posisi sebuah elemen tanpa mengganggu alur dokumen. Beberapa fungsi yang populer adalah:

• translate(x, y): Memindahkan elemen.
• rotate(derajat): Memutar elemen.
• scale(x, y): Mengubah ukuran elemen.
• skew(x-derajat, y-derajat): Memiringkan elemen.

Contoh Kode:

.kotak-transform:hover {
    transform: rotate(15deg) scale(1.2);
}

Hasil Tampilan:

Animasi dengan @keyframes

Aturan @keyframes memungkinkan Anda mendefinisikan tahapan-tahapan sebuah animasi. Anda bisa menentukan gaya pada titik awal (from atau 0%), titik akhir (to atau 100%), dan titik-titik di antaranya. Animasi ini kemudian diterapkan ke elemen menggunakan properti animation.

Contoh Kode:

/* 1. Definisikan animasinya */
@keyframes animasi-berdenyut {
    0% { transform: scale(1); background-color: #d0021b; }
    50% { transform: scale(1.1); background-color: #ff4136; }
    100% { transform: scale(1); background-color: #d0021b; }
}

/* 2. Terapkan ke elemen */
.lingkaran-berdenyut {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* Nama animasi, durasi, dan perulangan */
    animation: animasi-berdenyut 2s infinite;
}

Hasil Tampilan:

Selektor Tingkat Lanjut

Selain selektor dasar, ada kombinator yang memungkinkan Anda menargetkan elemen berdasarkan hubungannya dengan elemen lain.

• Descendant Selector (spasi): div p - Memilih semua elemen <p> di dalam <div>.
• Child Selector (>): div > p - Memilih elemen <p> yang merupakan anak langsung dari <div>.
• Adjacent Sibling Selector (+): h1 + p - Memilih elemen <p> yang berada tepat setelah elemen <h1>.
• Attribute Selector ([attr]): input[type="text"] - Memilih elemen <input> yang memiliki atribut type dengan nilai "text".

Spesifisitas (Specificity)

Spesifisitas adalah algoritma yang digunakan browser untuk menentukan aturan CSS mana yang paling relevan untuk sebuah elemen, yang pada akhirnya menentukan gaya mana yang akan diterapkan. Aturan yang lebih spesifik akan "menang".

Urutan kekuatan dari yang terlemah hingga terkuat:

1. Selektor elemen (misal: h1)
2. Selektor kelas, atribut, dan pseudo-class (misal: .contoh, [href], :hover)
3. Selektor ID (misal: #unik)
4. Gaya inline (misal: style="...")

Contoh:

<!-- HTML -->
<p id="intro" class="teks-biru">Teks ini akan berwarna apa?</p>

/* CSS */
#intro { color: red; }       /* ID - Paling spesifik */
.teks-biru { color: blue; }  /* Class */
p { color: green; }          /* Elemen */

Hasil Tampilan:

Filter dan Blend Mode

CSS modern memungkinkan Anda menerapkan efek grafis yang mirip dengan aplikasi editor gambar langsung di browser.

• filter: Menerapkan efek seperti blur, grayscale, brightness, dll.
• mix-blend-mode: Menentukan bagaimana konten sebuah elemen berbaur dengan konten di belakangnya.

Contoh Kode:

.gambar-blur:hover {
    filter: blur(5px);
}

.teks-berbaur {
    mix-blend-mode: screen;
    background-color: cyan;
    color: magenta;
    font-weight: bold;
}

Hasil Tampilan:

Arahkan mouse ke gambar untuk efek blur:

Bayangan Kotak dan Teks

Properti box-shadow menambahkan efek bayangan di sekitar bingkai elemen, sementara text-shadow menambahkan bayangan pada teks itu sendiri. Ini sangat efektif untuk membuat elemen tampak "terangkat" atau menonjol.

Contoh Kode:

.kartu-dengan-bayangan {
    box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3);
    /* offset-x | offset-y | blur-radius | warna */
}

.teks-dengan-bayangan {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Hasil Tampilan:

Gradien Warna (Gradients)

Daripada menggunakan satu warna solid, Anda bisa membuat latar belakang dengan transisi warna yang halus menggunakan linear-gradient() atau radial-gradient().

Contoh Kode:

.tombol-gradien {
    background-image: linear-gradient(to right, #4a90e2, #0056b3);
    color: white;
    border: none;
    padding: 15px 30px;
}

Hasil Tampilan:

Mengontrol Overflow

Properti overflow menentukan apa yang harus dilakukan ketika konten sebuah elemen lebih besar dari ukuran elemen itu sendiri.

• visible (default): Konten akan terlihat keluar dari kotak.
• hidden: Konten yang keluar akan disembunyikan.
• scroll: Konten yang keluar akan disembunyikan, tetapi browser akan menampilkan scrollbar agar pengguna bisa melihat sisanya.
• auto: Mirip dengan scroll, tetapi scrollbar hanya muncul jika benar-benar dibutuhkan.

Contoh Kode:

.kotak-teks-scroll {
    width: 100%;
    height: 100px;
    background-color: #eee;
    overflow: auto; /* atau scroll */
}

Hasil Tampilan: