CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan gaya elemen-elemen dalam halaman web. CSS memungkinkan Anda mengubah warna, ukuran, jenis huruf, tata letak, latar belakang, dan banyak lagi, dengan cara yang terpisah dari struktur konten dalam HTML.
Untuk menghubungkan CSS dengan HTML, Anda dapat menggunakan beberapa cara. Berikut adalah dua cara umum yang digunakan:
- Menggunakan elemen
<style>dalam tag<head>: Anda dapat menempatkan kode CSS di dalam elemen<style>yang ditempatkan di dalam elemen<head>dalam dokumen HTML. Ini akan menghubungkan CSS secara internal dengan HTML. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* Kode CSS Anda */
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>Dalam contoh di atas, elemen <style> digunakan untuk menempatkan kode CSS yang akan mempengaruhi elemen <h1> di dalam elemen <body>.
- Menggunakan file eksternal CSS: Anda juga dapat membuat file terpisah dengan ekstensi
.cssyang berisi kode CSS Anda, dan menghubungkannya dengan HTML menggunakan elemen<link>. Ini akan menghubungkan CSS secara eksternal dengan HTML. Contoh:
Filestyle.css:
/* Kode CSS Anda */
h1 {
color: blue;
}HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>Dalam contoh ini, kita membuat file style.css terpisah yang berisi kode CSS yang sama seperti contoh sebelumnya. Kemudian, menggunakan elemen <link> dengan atribut rel="stylesheet" dan atribut href untuk menghubungkan file CSS eksternal dengan dokumen HTML.
Kedua cara di atas memungkinkan Anda untuk mengatur tampilan dan gaya elemen-elemen pada halaman web menggunakan CSS. Pilihlah cara yang sesuai dengan kebutuhan Anda, tergantung pada kompleksitas proyek dan preferensi Anda.
