Series Mahir CSS #2 : Penulisan CSS
Hilya Zea 
Hai, hai! Gimana nih, sudah siap belajar lebih jauh tentang CSS? Kali ini kita bakal bahas cara penulisan CSS yang benar. Ini penting banget supaya kode kamu lebih rapi dan mudah dipahami, baik oleh kamu sendiri maupun orang lain (kalau nanti kerja tim, misalnya).
Tiga Cara Penulisan CSS
- Inline CSS
CSS langsung ditulis dalam atribut elemen HTML. Biasanya dipakai kalau hanya perlu mengatur satu elemen saja. Tapi, jangan terlalu sering dipakai ya, karena kodenya bisa cepat berantakan.
<h1 style="color: purple; font-size: 24px;">Halo, ini teks dengan Inline CSS!</h1>
- Internal CSS
Ditulis dalam tag<style>di bagian<head>file HTML. Cocok untuk halaman yang butuh desain sederhana tanpa file CSS terpisah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penulisan CSS</title>
<style>
h1 {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1>Ini teks dengan Internal CSS!</h1>
</body>
</html>
- External CSS
Penulisan CSS terpisah dalam file.css. Ini cara terbaik untuk proyek besar, karena semua styling dikumpulkan di satu tempat.
h1 {
color: blue;
font-family: Arial, sans-serif;
text-align: left;
}
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>Penulisan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Ini teks dengan External CSS!</h1>
</body>
</html>
Tips Menulis CSS dengan Baik
- Gunakan nama class atau ID yang deskriptif.
- Hindari penggunaan Inline CSS terlalu sering.
- Pisahkan file CSS untuk proyek yang lebih besar.
Sekianlah belajar CSS tentang cara penulisan CSS. Artikel ini penting banget untuk bikin kamu makin paham dasar-dasar CSS sebelum lanjut ke tutorial berikutnya di www.code80vity.com. Yuk, klik artikel selanjutnya, dan terus semangat belajar! ?
Comments