The My Project

Beranda
HTML

HTML | BAB 12 Menggunakan CSS


Menggunakan CSS

Untuk menghubungkan file CSS eksternal dengan HTML, kita dapat menggunakan tag . Tag ditempatkan di dalam elemen dari dokumen HTML.
Contohnya adalah sebagai berikut: 

  
  <!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> belajar coding by Ripal </h1>
<p> aku tanpa mu bagai html tanpa css, untungnya sekarang aku bersama tailwind </p>
</body>
</html>

Dalam contoh di atas, file CSS eksternal dengan nama "style.css" dihubungkan dengan dokumen HTML menggunakan tag . Atribut "rel" digunakan untuk menentukan jenis hubungan antara dokumen dan file terhubung, sedangkan atribut "href" digunakan untuk menentukan lokasi file CSS eksternal.

Untuk menerapkan gaya CSS pada elemen HTML, kita dapat menggunakan selektor CSS. Selektor CSS menargetkan elemen HTML yang ingin kita gayakan.
Contohnya adalah sebagai berikut: 

  /* style.css */
h1 {
   color: blue;
   font-size: 24px;
}

p {
   color: red;
   font-size: 16px;
}

Dalam contoh di atas, selektor CSS "h1" akan menerapkan gaya pada elemen dengan memberikan warna teks biru dan ukuran font 24px. Selektor CSS "p" akan menerapkan gaya pada elemen dengan memberikan warna teks merah dan ukuran font 16px.

hasil output :

  
 belajar coding by Ripal 


 aku tanpa mu bagai html tanpa css, untungnya sekarang aku bersama tailwind

File CSS eksternal dengan nama "style.css" tersebut dapat dihubungkan dengan dokumen HTML seperti yang telah dijelaskan sebelumnya, sehingga gaya yang didefinisikan dalam file CSS akan diterapkan pada elemen HTML yang sesuai dengan selektor CSS yang digunakan.