Pengenalan HTML 17
CSS Tingkat Lanjut
oleh: Suryo Adhy Chandra, ST
Sekarang kita naik satu tingkat. Selain memberi style langsung ke tag, kita juga bisa memilih
tag yang berada di dalam tag lain, menggabungkan beberapa class, dan membuat tampilan tabel lebih rapi.
1. Styling CSS untuk tag di dalam tag lain
Dalam CSS, kita bisa memilih elemen yang berada di dalam elemen lain. Cara ini disebut
selector turunan atau descendant selector.
<style>
div p {
color: #2563eb;
font-size: 20px;
}
p span {
color: #dc2626;
font-weight: bold;
}
</style>
<div>
<p>Ini paragraf yang ada di dalam div.</p>
</div>
<p>
Ini paragraf biasa dengan <span>teks penting</span> di dalamnya.
</p>
Penjelasan:
div p artinya semua tag p yang ada di dalam div.
p span artinya semua tag span yang ada di dalam p.
Preview hasil:
Ini paragraf yang ada di dalam div.
Ini paragraf biasa dengan teks penting di dalamnya.
2. Contoh sederhana gabungan class untuk div, p, dan span
Kita juga bisa memberi lebih dari satu class pada sebuah elemen. Ini berguna agar style lebih fleksibel
dan bisa digabung-gabung sesuai kebutuhan.
<style>
.kotak {
background-color: #dbeafe;
padding: 16px;
border-radius: 10px;
}
.teks-besar {
font-size: 22px;
}
.teks-biru {
color: #1d4ed8;
}
.teks-penting {
color: #b91c1c;
font-weight: bold;
}
</style>
<div class="kotak teks-besar">
<p class="teks-biru">
Ini paragraf di dalam kotak.
<span class="teks-penting">Bagian ini penting!</span>
</p>
</div>
Preview hasil:
Ini paragraf di dalam kotak.
Bagian ini penting!
Dengan gabungan class, kita tidak perlu menulis ulang style yang sama. Satu class bisa untuk warna,
class lain untuk ukuran huruf, dan class lain lagi untuk bentuk kotaknya.
3. Membuat styling untuk table
Tabel akan terlihat jauh lebih enak dibaca jika diberi border, warna header, padding, dan warna selang-seling.
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
}
th {
background-color: #1d4ed8;
color: white;
padding: 10px;
}
td {
border: 1px solid #cbd5e1;
padding: 10px;
}
tr:nth-child(even) {
background-color: #eff6ff;
}
</style>
<table>
<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andi</td>
<td>8A</td>
<td>90</td>
</tr>
<tr>
<td>Sinta</td>
<td>8B</td>
<td>95</td>
</tr>
</tbody>
</table>
Preview tabel:
| Nama |
Kelas |
Nilai |
| Andi |
8A |
90 |
| Sinta |
8B |
95 |
Kesimpulan
CSS tingkat lanjut membantu kita memilih elemen dengan lebih tepat, menggabungkan class supaya styling
lebih rapi, dan membuat tabel tampak profesional. Ini adalah langkah penting sebelum membuat halaman web
yang lebih besar dan lebih terstruktur.
