TujuanMempelajari cara menggunakan CSS untuk mengubah warna, font, tata letak, dan jarak antar elemen agar tampilan web lebih menarik, rapi, dan responsif di berbagai perangkat.
KonteksTutorial ini dilakukan untuk memisahkan desain dari konten sehingga lebih mudah dalam pengelolaan tampilan website, terutama saat melakukan perubahan rutin atau pemeliharaan agar konsistensi desain tetap terjaga.
Hal yang DiperlukanLangkah-LangkahBuat folder baru di komputer:
+ untuk membuat folder baru. Beri nama sesuai keinginan.Buat file HTML baru bernama index.html:
index.html.Masukkan kode berikut ke dalam 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>Belajar CSS Dasar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, CSS!</h1>
<p>Ini adalah contoh teks.</p>
</body>
</html>
Buat file CSS baru bernama style.css di direktori yang sama.
<head> file index.html:<link rel="stylesheet" href="style.css">
Tambahkan kode berikut ke dalam file style.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #4CAF50;
text-align: center;
}
p {
font-size: 16px;
text-align: justify;
}
Penjelasan Kode CSS:
body, h1, p: Elemen HTML yang diberi gaya.background-color: Mengatur warna latar belakang elemen.font-family: Menentukan jenis font yang digunakan.text-align: Mengatur perataan teks (center/justify).font-size: Mengatur ukuran font.color: Mengatur warna teks.margin & padding: Mengatur spasi di luar dan dalam elemen.Jalankan Live Server di Visual Studio Code:
Kesimpulan Dengan menggunakan CSS, tampilan website menjadi lebih menarik dan terstruktur, dengan kontrol penuh terhadap warna, ukuran font, tata letak, dan elemen visual lainnya.
Documentation