Dasar-dasar CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dokumen HTML.

Sejarah CSS

CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994 ketika bekerja di CERN dengan Tim Berners-Lee. CSS1 dirilis pada tahun 1996, CSS2 pada 1998, dan CSS3 mulai dikembangkan sejak 1999 dengan pendekatan modular.

CSS3 memperkenalkan banyak fitur baru seperti border-radius, box-shadow, flexbox, grid, animasi, dan banyak lagi.

Sintaks Dasar CSS

CSS terdiri dari selector dan declaration block:

selector {
    property: value;
    property: value;
}

Contoh:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Penjelasan:

Selector - Elemen HTML yang akan diberi style (h1)
Property - Jenis style yang akan diubah (color)
Value - Nilai dari property (blue)
Declaration - Pasangan property:value (color: blue)
Declaration block - Kumpulan declaration dalam {}

Cara Menambahkan CSS

Ada 3 cara menambahkan CSS ke dokumen HTML:

1. Inline CSS

<h1 style="color: blue; font-size: 24px;">Judul</h1>

Catatan: Hindari penggunaan inline CSS karena sulit dikelola dan memiliki spesifisitas tinggi.

2. Internal CSS

<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

3. External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

Best Practice: Gunakan external CSS untuk memisahkan struktur (HTML) dan presentasi (CSS).

CSS Selector

Selector digunakan untuk memilih elemen HTML yang akan diberi style:

Selector Dasar

Selector	Contoh	Deskripsi
Element	`p`	Memilih semua elemen <p>
Class	`.header`	Memilih elemen dengan class="header"
ID	`#main`	Memilih elemen dengan id="main"
Universal	`*`	Memilih semua elemen

Selector Kombinasi

Selector	Contoh	Deskripsi
Descendant	`div p`	Memilih semua <p> di dalam <div>
Child	`ul > li`	Memilih semua <li> yang anak langsung dari <ul>
Adjacent sibling	`h1 + p`	Memilih <p> yang langsung setelah <h1>
General sibling	`h1 ~ p`	Memilih semua <p> yang setelah <h1>

Selector Atribut

/* Elemen dengan atribut tertentu */
a[target] {
    color: red;
}

/* Elemen dengan atribut dan nilai tertentu */
a[href="https://example.com"] {
    color: green;
}

/* Elemen dengan atribut yang mengandung nilai */
img[alt~="logo"] {
    border: 1px solid black;
}

/* Elemen dengan atribut yang dimulai dengan nilai */
a[href^="https"] {
    background: url(lock-icon.png) no-repeat left center;
}

/* Elemen dengan atribut yang diakhiri dengan nilai */
a[href$=".pdf"] {
    background: url(pdf-icon.png) no-repeat left center;
}

/* Elemen dengan atribut yang mengandung substring */
a[href*="google"] {
    color: blue;
}

Pseudo-class dan Pseudo-element

Pseudo-class

Memilih elemen berdasarkan state tertentu:

/* Link yang belum dikunjungi */
a:link {
    color: blue;
}

/* Link yang sudah dikunjungi */
a:visited {
    color: purple;
}

/* Elemen saat dihover */
button:hover {
    background-color: lightgray;
}

/* Elemen saat aktif (diklik) */
button:active {
    transform: scale(0.98);
}

/* Elemen yang mendapat fokus */
input:focus {
    border-color: blue;
}

/* Elemen pertama dari parent */
li:first-child {
    font-weight: bold;
}

/* Elemen terakhir dari parent */
li:last-child {
    border-bottom: none;
}

/* Elemen ke-n dari parent */
li:nth-child(2n) {
    background-color: #f5f5f5;
}

Pseudo-element

Memilih bagian tertentu dari elemen:

/* Menambahkan konten sebelum elemen */
.blockquote::before {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* Menambahkan konten setelah elemen */
.blockquote::after {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* Memilih huruf pertama */
p::first-letter {
    font-size: 2em;
    float: left;
}

/* Memilih baris pertama */
p::first-line {
    font-weight: bold;
}

/* Memilih teks yang diseleksi user */
::selection {
    background-color: yellow;
    color: black;
}

Praktik Mandiri

Coba edit CSS berikut dan lihat perubahan pada elemen di bawah:

.demo-box {
    width: 200px;
    height: 150px;
    padding: 20px;
    margin: 30px auto;
    border: 2px solid #333;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    line-height: 150px;
    font-size: 18px;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.demo-box:hover {
    /* Coba ubah properti hover di sini */
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background-color: #e0e0e0;
}

.demo-box::before {
    content: '★ ';
    color: gold;
}

.demo-box::after {
    content: ' ★';
    color: gold;
}

Hasil:

Kotak Demo