Tutorial Belajar HTML Part 6 - Styling Teks dan Konten dengan CSS: Penerapan Gaya pada Halaman Web
Styling Teks dan Konten dengan CSS: Penerapan Gaya pada Halaman Web
Cascading Style Sheets (CSS) adalah bahasa pemrograman yang digunakan untuk memberikan gaya, tata letak, dan desain visual pada halaman web. Dalam kombinasi dengan HTML, CSS memungkinkan pengaturan tampilan yang menarik dan menyesuaikan estetika halaman web.
Menghubungkan CSS dengan HTML
Untuk menggunakan CSS pada halaman web, Anda dapat menautkannya ke dalam dokumen HTML Anda menggunakan tag <link> di bagian <head>:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman Web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Konten HTML Anda -->
</body>
</html>
Mengaplikasikan Gaya pada Teks dan Konten
1. Gaya Teks
/* Menentukan gaya untuk tag h1 */
h1 {
color: blue;
font-size: 24px;
font-family: 'Arial', sans-serif;
text-align: center;
}
/* Menentukan gaya untuk paragraf */
p {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
2. Pengaturan Tata Letak
/* Mengatur tata letak header */
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
/* Mengatur tata letak navigasi */
nav {
display: flex;
justify-content: space-around;
background-color: #444;
color: white;
}
Menggunakan Selektor CSS
-
Selector Elemen: Mengganti gaya untuk tag HTML tertentu (seperti <h1>, <p>, <div>).
-
Selector Kelas: Menerapkan gaya pada elemen dengan kelas tertentu, ditandai dengan .kelas di CSS dan class="kelas" di HTML.
-
Selector ID: Menerapkan gaya pada elemen dengan ID tertentu, ditandai dengan #id di CSS dan id="id" di HTML.
Mendefinisikan Tampilan dengan CSS
-
Warna dan Font: Mengubah warna, ukuran, dan jenis font teks.
-
Tata Letak: Mengatur jarak, tata letak, dan penataan konten.
-
Responsif: Membuat halaman web responsif agar sesuai dengan perangkat yang digunakan.
Kesimpulan
CSS memberikan kemampuan untuk mengubah tampilan halaman web, memperbaiki tata letak, dan memberikan gaya pada elemen HTML. Dengan memahami konsep dasar CSS dan cara menerapkannya, Anda dapat membuat halaman web yang menarik dan responsif. Eksperimen dengan berbagai properti CSS untuk menciptakan desain yang sesuai dengan kebutuhan dan tujuan konten halaman web Anda.
