Kalau kamu sudah mulai belajar HTML, pasti kamu pernah dengar istilah CSS. Tapi, apa sebenarnya CSS itu? Dan bagaimana cara menggunakannya? Nah, artikel ini akan membantu kamu memahami CSS dengan cara yang simpel dan nggak bikin pusing.
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Fungsinya adalah untuk mengatur tampilan dari elemen-elemen HTML di sebuah halaman web.
Kalau HTML itu ibarat kerangka tubuh manusia, maka CSS adalah pakaiannya. Jadi, dengan CSS, kamu bisa menentukan warna, ukuran, posisi, dan gaya dari elemen HTML agar terlihat menarik.
Contoh sederhananya:
<p style="color: blue;">Halo dunia!</p>Teks “Halo dunia!” akan tampil berwarna biru karena dikasih CSS langsung di dalam tag HTML.
Kenapa Harus Belajar CSS?
- Biar tampilan web kamu nggak polos-polos amat
- Supaya kamu bisa bikin website yang modern dan responsif
Jadi bekal penting kalau kamu ingin jadi web developer
Cara Menulis CSS
Ada 3 cara umum untuk menulis CSS:
- Inline CSS – langsung di dalam tag HTML
Contoh: - <h1 style=”color: red;”>Judul</h1>
- Internal CSS – ditulis di dalam tag <style> di bagian <head>
Contoh: - <head>
- <style>
- p {
- color: green;
- }
- </style>
- </head>
- External CSS – ditulis di file terpisah (biasanya bernama style.css) dan dipanggil ke file HTML
Contoh style.css: - body {
- background-color: #f0f0f0;
- }
- h1 {
- color: navy;
- }
Lalu di HTML-nya:
<link rel=”stylesheet” href=”style.css”>
Dasar-Dasar Penulisan CSS
CSS ditulis dengan selector, property, dan value. Contohnya:
p {
color: blue;
font-size: 16px;
}
Artinya:
- Selector: p (artinya paragraf)
- Property: color, font-size
Value: blue, 16px
Beberapa Property CSS yang Sering Digunakan
| Property | Fungsi | Contoh |
| color | Mengatur warna teks | color: red; |
| background-color | Warna latar belakang | background-color: yellow; |
| font-size | Ukuran huruf | font-size: 20px; |
| text-align | Posisi teks (kiri, tengah, kanan) | text-align: center; |
| margin | Jarak luar elemen | margin: 10px; |
| padding | Jarak dalam elemen | padding: 15px; |
| border | Menambahkan garis batas | border: 1px solid black; |
Tips Belajar CSS
- Praktik langsung
Coba buat halaman HTML sederhana dan hias dengan CSS. Semakin sering kamu coba, makin paham. - Gunakan alat bantu
Seperti CodePen, JSFiddle, atau Visual Studio Code untuk latihan. - Pelajari satu per satu
Jangan langsung semua. Mulai dari warna, teks, box model, lalu layout (seperti Flexbox dan Grid).
Cari inspirasi
Lihat website favoritmu dan coba tiru tampilannya dengan CSS. Ini cara yang bagus buat belajar styling.
CSS itu sebenarnya mudah dipahami kalau kamu belajar pelan-pelan dan sering latihan. Mulai dari dasar seperti warna dan teks, lalu naik ke level layout dan animasi. Jangan takut salah—belajar web itu proses coba-coba.
Kalau kamu sudah paham HTML dan CSS, kamu sudah bisa mulai bikin halaman web yang keren! Terima kasih sudah membaca! Kalau kamu merasa artikel ini bermanfaat, jangan ragu untuk share ke teman-temanmu yang juga ingin belajar CSS, ya!
