1. Apa Itu CSS dan Peranannya CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan halaman web. Dengan CSS, Anda dapat mengatur warna, font, tata letak, dan elemen visual lainnya pada situs web. CSS memisahkan konten (HTML) dari presentasi, sehingga mempermudah pengelolaan dan pembaruan desain.
Contoh Sederhana: HTML
<p>Hello, World!</p>CSS:
p {
color: blue;
}Hasil: Teks “Hello, World!” akan berwarna biru.
2. Cara Menulis CSS
- Inline CSS: Ditulis langsung di elemen HTML menggunakan atribut
style.
<p style="color: red;">Ini teks merah.</p>- Internal CSS: Ditulis dalam tag
<style>di bagian<head>HTML.
<style> p { color: green; } </style>- External CSS: Ditulis di file terpisah dengan ekstensi
.cssdan dihubungkan menggunakan<link>.
<link rel="stylesheet" href="style.css">3. Struktur Dasar CSS CSS ditulis dalam format:
selector {
property: value;
}- Selector: Elemen HTML yang akan diatur (contoh:
p,.class,#id). - Property: Properti desain yang ingin diubah (contoh:
color,font-size). - Value: Nilai properti (contoh:
blue,16px).
Contoh:
h1 {
font-size: 24px;
color: navy;
}4. Contoh Praktis: Membuat Teks Berwarna Buat file HTML dan CSS berikut:
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>
<h1>Belajar CSS Itu Seru!</h1>
<p>Ini adalah teks berwarna biru.</p>
</body>
</html>CSS (style.css):
h1 {
color: orange;
}
p {
color: blue;
}Hasil: Judul “Belajar CSS Itu Seru!” akan berwarna oranye, sedangkan teks paragraf berwarna biru.
Kesimpulan: Dalam seri ini, Anda telah mempelajari apa itu CSS, cara menulisnya, dan struktur dasarnya. Di artikel berikutnya, kita akan membahas selektor dan spesifisitas CSS secara mendalam!
