DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat CSS di HTML bisa menjadi hal yang menantang jika kamu baru belajar tentang pengembangan web. Namun, jangan khawatir! Artikel ini akan membantu kamu memahami cara membuat CSS di HTML dengan langkah yang mudah dan dapat dimengerti.
CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan layout sebuah dokumen HTML. Dengan CSS, kamu bisa mengatur warna, font, ukuran teks, jarak antar elemen, dan banyak lagi. CSS membuat tampilan website menjadi lebih menarik dan profesional.
Cara pertama untuk menggunakan CSS adalah dengan menghubungkannya langsung ke dalam dokumen HTML. Ini biasa disebut sebagai “External CSS”. Berikut adalah caranya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="namafile.css">
</head>
<body>
<p>Ini adalah contoh paragraph.</p>
<body>
</html>
Di dalam kode di atas, tag <link>
digunakan untuk menghubungkan file CSS dengan dokumen HTML. Attribut href
berisi lokasi atau path dari file CSS tersebut.
Cara kedua untuk menggunakan CSS adalah dengan menuliskannya langsung di dalam dokumen HTML. Ini biasa disebut sebagai “Internal CSS”. Berikut adalah caranya:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Ini adalah contoh paragraph.</p>
<body>
</html>
Di dalam kode di atas, tag <style>
digunakan untuk menulis kode CSS. Di dalam tag tersebut, kita dapat menentukan style untuk elemen tertentu. Dalam contoh ini, semua teks di dalam elemen <p>
akan berwarna merah.
Cara ketiga untuk menggunakan CSS adalah dengan menuliskannya langsung pada elemen HTML yang ingin diubah. Ini biasa disebut sebagai “Inline CSS”. Berikut adalah caranya:
<!DOCTYPE html>
<html>
<body>
<p style="color: red;">Ini adalah contoh paragraph.</p>
<body>
</html>
Pada contoh ini, atribut style
digunakan untuk menulis CSS secara langsung pada elemen <p>
. Teks di dalam paragraph tersebut akan berwarna merah.
Semoga artikel ini dapat membantu kamu memahami lebih jauh tentang cara membuat CSS di HTML. Jangan lupa untuk terus berlatih dan mengexplore berbagai styling dengan CSS untuk membuat website yang lebih menarik dan dinamis. Selamat belajar!
Link terkait: