CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web.
Cara Menyisipkan CSS
Ada tiga cara utama untuk menyisipkan CSS ke dalam HTML:
- Inline CSS: CSS ditulis langsung di atribut elemen HTML dengan
style.html<p style="color: red; font-size: 16px;">Ini adalah paragraf berwarna merah.</p> - Internal CSS: CSS ditulis di dalam tag
<style>di bagian<head>dari dokumen HTML.<head><style> p { color: blue; font-size: 18px; } </style></head> - External CSS: CSS ditulis di file terpisah dengan ekstensi
.css, lalu dihubungkan ke halaman HTML menggunakan tag<link>.<head><link rel="stylesheet" href="styles.css"></head>
Sekarang kita masuk ke TAHAP 2 – HTML + CSS
Pada tahap ini kita belajar:
“HTML itu seperti rangka rumah,
CSS adalah cat, warna, dan dekorasinya.”
Kita tidak mengubah struktur HTML yang sudah dibuat,
kita hanya menambahkan file CSS untuk mempercantik tampilannya.
🟦 Langkah 1 – Membuat File CSS
Di folder project, buat file baru:
style.css
Lalu hubungkan ke index.html pada bagian <head>:
<head>
<meta charset="UTF-8">
<title>Toko Online SMK</title>
<link rel="stylesheet" href="style.css">
</head>
Penjelasan:
“Tag
<link>digunakan untuk menghubungkan HTML dengan CSS.”
🟦 Langkah 2 – Memberi Gaya Dasar Halaman
Isi style.css:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header, section, footer {
padding: 20px;
margin: 10px;
background-color: white;
}
Penjelasan sederhana:
font-family→ mengatur jenis hurufbackground-color→ warna latarpadding→ jarak ke dalammargin→ jarak ke luar
Sekarang halaman terlihat lebih rapi dan tidak polos.
🟦 Langkah 3 – Mempercantik Header & Menu
Tambahkan di style.css:
header {
background-color: #0d6efd;
color: white;
}
nav a {
color: white;
text-decoration: none;
margin-right: 10px;
}
nav a:hover {
text-decoration: underline;
}
Penjelasan:
“CSS bisa mengubah warna, bahkan memberi efek saat mouse diarahkan.”
🟦 Langkah 4 – Membuat Produk Lebih Rapi
Tambahkan class pada HTML produk:
<div class="produk">
<h3>Kaos Polos</h3>
<img src="..." width="150">
<p>Harga: Rp 50.000</p>
<button>Beli</button>
</div>
Lalu di style.css:
.produk {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
width: 200px;
display: inline-block;
text-align: center;
}
.produk img {
border-radius: 8px;
}
button {
background-color: orange;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
}
button:hover {
background-color: darkorange;
}
Penjelasan:
.produk→ mengatur tampilan tiap produkdisplay: inline-block→ membuat produk sejajar:hover→ efek saat mouse diarahkan
Sekarang tampilannya mulai mirip toko online sungguhan.
🟦 Langkah 5 – Mempercantik Tabel
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #0d6efd;
color: white;
}
th, td {
padding: 10px;
text-align: left;
}
Penjelasan:
“CSS membuat tabel lebih enak dibaca dan profesional.”
🟦 Langkah 6 – Mempercantik Form
input, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
}
form {
max-width: 400px;
}
Sekarang form terlihat rapi dan nyaman digunakan.
Pendalaman CSS
“CSS digunakan untuk mengatur tampilan halaman:
warna, ukuran, jarak, posisi, dan bentuk.”
Di CSS, kita mengenal selector untuk memilih elemen HTML yang ingin diubah tampilannya.
Ada dua selector yang paling penting:
🔹 Class (.)
- Digunakan untuk banyak elemen
- Bisa dipakai berulang-ulang
Contoh di HTML:
<div class="produk">...</div>
<div class="produk">...</div>
Di CSS:
.produk {
border: 1px solid #ddd;
}
Artinya:
“Semua elemen yang punya class
produkakan diberi gaya ini.”
🔹 ID (#)
- Digunakan untuk satu elemen saja
- Tidak boleh sama dengan elemen lain
Contoh di HTML:
<p id="cart">0</p>
Di CSS:
#cart {
font-weight: bold;
color: red;
}
Artinya:
“Hanya elemen dengan id
cartyang berubah.”
Ringkasnya:
| Selector | Digunakan Untuk | Contoh |
|---|---|---|
.class | Banyak elemen | .produk |
#id | Satu elemen | #cart |
