Series Mahir CSS #1 : Pengenalan CSS

Hai! Gimana kabarnya? Semoga selalu sehat dan semangat ya. Kali ini kita akan mulai perjalanan belajar CSS dari awal banget, biar kamu paham dasarnya. CSS (Cascading Style Sheets) itu apa sih? Secara sederhana, CSS adalah bahasa yang digunakan untuk mendesain tampilan website.
Kalau HTML itu ibarat kerangka tubuh manusia, maka CSS adalah pakaian yang bikin tampilannya keren. Dengan CSS, kamu bisa mengatur warna, font, layout, bahkan animasi!
Contoh Struktur Dasar CSS
CSS bisa digunakan dengan tiga cara utama:
- Inline CSS (langsung di elemen HTML).
- Internal CSS (di dalam tag
<style>
di file HTML). - External CSS (terpisah di file
.css
).
Contoh Inline CSS
<p style="color: blue;">Ini teks dengan warna biru!</p>
Contoh Internal CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pengenalan CSS</title> <style> p { color: green; } </style> </head> <body> <p>Ini teks dengan warna hijau!</p> </body> </html>
Contoh External CSS
File style.css
:
p { color: red; }
File index.html
:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pengenalan CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>Ini teks dengan warna merah!</p> </body> </html>
Mudah, kan? Nah, ini baru pengenalan. Kalau sudah siap, kita lanjut ke pembahasan berikutnya ya. Kalau ada yang bingung, langsung tanya aja. ?
Comments