Diskon! Diskon! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT CSS DI HTML

Pelajari cara membuat CSS di HTML dengan mudah dan cepat. Tutorial ini akan membantu kamu memahami dasar-dasar styling dalam pembuatan website.

Daftar Isi:

Apa itu CSS?
Menghubungkan CSS dengan HTML
Menulis CSS di dalam HTML
Menulis CSS langsung pada elem...

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.

Apa itu CSS?

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.

Menghubungkan CSS dengan HTML

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!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding