Fungsi Utama CSS:
CSS digunakan untuk memisahkan konten (HTML) dari presentasi (gaya/tampilan). Ini memungkinkan kamu untuk:
- Mengubah warna teks dan latar belakang.
- Menentukan jenis dan ukuran font.
- Mengatur layout halaman, seperti margin, padding, posisi, dan grid.
- Mengatur animasi dan transisi.
- Menyesuaikan tampilan halaman untuk berbagai ukuran layar (responsive design).
Contoh Sederhana:
HTML tanpa CSS:
<p>Hello, world!</p>
HTML dengan CSS (Internal):
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
Teks “Hello, world!” akan tampil dalam warna biru dan ukuran font 20px.
Tipe Penulisan CSS:
- Inline CSS – langsung dalam elemen HTML.
<p style="color:red;">Teks merah</p> - Internal CSS – dalam tag
<style>di dalam dokumen HTML.<style> body { background-color: lightgray; } </style> - External CSS – disimpan di file
.cssterpisah.<link rel="stylesheet" href="style.css">Dalam filestyle.css:h1 { color: green; }