HTML’s CSS
By : Dzaky Hisyam Falah
XI TKJ 1 | 03
Apa itu CSS ?
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang fundamental dalam
pengembangan web, bekerja sama erat dengan HTML dan JavaScript. Jika HTML ibarat
kerangka atau struktur bangunan, maka CSS adalah arsitek interior dan eksterior yang
memberikan warna, gaya, dan tata letak, membuatnya hidup dan menarik secara visual.
Apa Fungsi Utama CSS ?
Peran utama CSS adalah mendeskripsikan bagaimana elemen HTML harus ditampilkan pada
berbagai media, baik itu layar komputer, cetakan kertas, atau perangkat seluler.
Pemisahan Konten dari Presentasi: Ini adalah manfaat terbesar CSS. Dengan
memisahkan struktur (HTML) dari desain (CSS), pengembang dapat mengubah
seluruh tampilan situs web hanya dengan memodifikasi satu file CSS eksternal, tanpa
menyentuh kode HTML dasar. Ini meningkatkan efisiensi, kemudahan pemeliharaan,
dan konsistensi desain.
Pengalaman Pengguna yang Lebih Baik: CSS memungkinkan terciptanya navigasi
yang lebih baik dan antarmuka yang ramah pengguna (user-friendly).
Desain Responsif (Responsive Design): CSS modern memungkinkan situs web
untuk beradaptasi secara otomatis dengan ukuran layar yang berbeda, memastikan
tampilan yang optimal di desktop, tablet, dan ponsel.
Efisiensi dan Kecepatan Memuat Halaman: Penggunaan file CSS eksternal yang
sama di banyak halaman memungkinkan peramban (browser) untuk menyimpan
(cache) file tersebut. Hal ini mengurangi waktu muat halaman berikutnya.
Bagaimana Cara Penempatan CSS ?
CSS Internal (Internal CSS): Kode CSS diletakkan di dalam tag <style> di
bagian <head> dokumen HTML. Cocok untuk gaya yang hanya berlaku untuk satu
halaman tertentu.
CSS Eksternal (External CSS): Kode CSS ditulis dalam file terpisah dengan
ekstensi .css dan ditautkan ke HTML menggunakan tag <link> . Ini adalah metode
yang paling disarankan untuk proyek besar
CSS Inline (Inline CSS): Gaya diterapkan langsung pada elemen HTML
menggunakan atribut style="" . Metode ini umumnya dihindari karena mencampur
presentasi dengan struktur dan mengurangi manfaat pemisahan kode.
Secara keseluruhan, CSS adalah alat yang sangat kuat yang mengubah dokumen HTML polos
menjadi pengalaman visual yang dinamis, konsisten, dan responsif di seluruh web modern
Contoh Penggunaan
1. CSS Internal
Fokus: Mengatur satu elemen spesifik saja.
Cara Pakai: Anda menambahkan atribut style langsung ke dalam tag pembuka elemen
HTML yang ingin Anda ubah.
Kapan Digunakan:
o Untuk pengujian cepat atau debugging.
o Jika Anda perlu menerapkan gaya unik untuk satu elemen saja dan tidak ada
elemen lain yang akan menggunakan gaya tersebut.
Kelemahan: Membuat kode HTML Anda kotor, sulit dibaca, dan sangat sulit untuk
dikelola jika Anda memiliki banyak elemen.
Contoh :
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>Contoh Internal CSS</title>
6. <style>
7. /* Desain simpel: card, warna lembut, font sistem */
8. :root{--bg:#f3f6f9;--card:#ffffff;--accent:#2563eb;--
muted:#475569}
9. *{box-sizing:border-box}
10. body{margin:0;min-height:100vh;display:flex;align-
items:center;justify-
content:center;padding:24px;background:var(--bg);font-
family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica
Neue',Arial;color:#071023}
11. .card{width:100%;max-width:720px;background:var(--
card);padding:28px;border-radius:12px;box-shadow:0 8px 28px
rgba(2,6,23,0.06)}
12. h1{font-family:Georgia, 'Times New Roman',
serif;color:var(--accent);font-size:1.6rem;margin:0 0 8px;text-
align:center}
13. p{color:var(--muted);line-height:1.6;margin:0 0
10px;font-size:1rem}
14. @media (max-width:480px){.card{padding:18px}h1{font-
size:1.2rem}}
15. </style>
16. </head>
17. <body>
18.
19. <div class="card">
20. <h1>Judul Halaman Web</h1>
21. <p>Ini adalah paragraf pertama yang gayanya sudah diatur
oleh internal CSS.</p>
22. <p>Ini adalah paragraf kedua.</p>
23. </div>
24.
25. </body>
26. </html>
2. CSS External
Fokus: Mengatur gaya untuk seluruh situs web dari satu lokasi pusat.
Cara Pakai: Anda membuat file .css terpisah (misalnya [Link]) dan menautkannya
ke setiap halaman HTML menggunakan tag <link rel="stylesheet"
href="[Link]"> di bagian <head>.
Kapan Digunakan:
o Ini adalah metode terbaik dan paling direkomendasikan untuk proyek nyata
atau situs web yang memiliki lebih dari satu halaman.
Keuntungan: Memisahkan struktur (HTML) dari presentasi (CSS). Jika Anda ingin
mengubah warna latar belakang di 100 halaman, Anda cukup mengubah satu baris
kode di satu file [Link] saja, dan semua halaman akan terbarui secara otomatis.
Contoh HTML :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Singkat — Contoh</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="banner">
<div class="container banner-inner">
<h1 class="banner-title">Judul Besar</h1>
<p class="banner-sub">Subjudul yang menarik perhatian</p>
<p class="banner-text">Paragraf singkat yang menjelaskan inti pesan atau ajakan.
Ringkas, jelas, dan mudah dibaca.</p>
</div>
</header>
</body>
</html>
Contoh CSS :
/* [Link] — Desain simpel: card, warna lembut, font sistem */
:root {
--bg: #f3f6f9;
--card: #ffffff;
--accent: #2563eb;
--muted: #475569
}
*{
box-sizing: border-box
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--bg);
font-family: system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
color: #071023
}
.card {
width: 100%;
max-width: 720px;
background: var(--card);
padding: 28px;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(2,6,23,0.06)
}
h1 {
font-family: Georgia,'Times New Roman',serif;
color: var(--accent);
font-size: 1.6rem;
margin: 0 0 8px;
text-align: center
}
p{
color: var(--muted);
line-height: 1.6;
margin: 0 0 10px;
font-size: 1rem
}
@media (max-width: 480px) {
.card {
padding: 18px
}
h1 {
font-size: 1.2rem
}
}
3. CSS Inline
Fokus: Mengatur gaya untuk satu halaman HTML secara keseluruhan.
Cara Pakai: Anda meletakkan semua aturan CSS Anda di dalam tag <style> yang
ditempatkan di bagian <head> dokumen HTML.
Kapan Digunakan:
o Ketika Anda memiliki satu halaman yang gayanya unik dan sangat berbeda
dari halaman lain di situs web Anda.
o Untuk template email HTML yang sering kali memerlukan gaya di satu
tempat.
Kelemahan: Jika Anda memiliki 10 halaman web, Anda harus menyalin dan
menempelkan kode CSS yang sama di setiap halaman. Perubahan gaya harus
dilakukan di 10 tempat terpisah.
Contoh :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Dengan CSS Inline</title>
</head>
<body style="margin:0; background:linear-gradient(135deg,#2563eb,#06b6d4); min-
height:100vh; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#fff;
display:flex; align-items:center; justify-content:center;">
<div style="width:92%; max-width:820px; text-align:center; padding:48px 12px;">
<h1 style="font-family:Georgia,'Times New Roman',serif; font-size:2.6rem; line-
height:1.05; margin:0 0 8px;">Judul Besar</h1>
<p style="font-family:Arial,sans-serif; font-weight:600; font-size:1.1rem; margin:0 0
12px; color:rgba(255,255,255,0.9);">Subjudul yang menarik perhatian</p>
<p style="font-size:1rem; line-height:1.6; color:rgba(255,255,255,0.85);
margin:0;">Paragraf singkat yang menjelaskan inti pesan atau ajakan. Ringkas, jelas, dan
mudah dibaca.</p>
</div>
</body>
</html>
Kesimpulan :
CSS (Cascading Style Sheets) berfungsi untuk mempercantik dan mengatur tata letak konten
HTML (teks, gambar, dll.). Ada tiga cara untuk mengaplikasikannya, yang diurutkan
berdasarkan kekuatan prioritasnya (dari tertinggi ke terendah):
1. Inline: Ditulis langsung di dalam elemen (<p style="...">).
2. Internal: Ditulis di dalam tag <style> di bagian kepala <head> halaman.
3. Eksternal: Ditulis dalam file .css terpisah dan dihubungkan ke halaman HTML.
Metode Eksternal adalah cara yang paling direkomendasikan karena memisahkan desain dari
struktur HTML, membuat kode lebih terorganisir, efisien, dan sangat mudah untuk mengelola
tampilan seluruh situs web dari satu tempat saja.