9. CSS pada HTML

CSS adalah kependekan dari Cascading Style Sheets. CSS digunakan untuk memformat elemen HTML, seperti memberikan warna, mengatur ukuran font, dan lain-lain.

Dibagian ini, saya hanya akan menjelaskan sedikit bagaimana hubungan CSS dengan HTML, tutorial CSS secara lengkap akan dibuat secara terpisah.

Langsung saja, guys...

CSS dapat ditambahkan ke elemen HTML dengan 3 cara:

  1. Inline : CSS ditulis langsung dengan menggunakan atribut style dalam elemen HTML.
  2. Internal : ditulis dengan menggunakan elemen <style> di bagian <head> dokumen HTML.
  3. Eksternal : ditulis dengan menggunakan file CSS eksternal, misalnya style.css, dsb.

Umumnya cara yang ketiga itu yang banyak dipakai, namun itu semua sesuai kebutuhan masing-masing.

1. Menggunakan CSS dengan cara inline

Praktekin css_inline.html:

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Inline CSS pada HTML</title> 
   </head>
 
   <body> 
      <h1 style="color:blue;text-decoration:underline;">Contoh inline CSS:</h1>
      <p style = "color:red;">Teks warna merah</p>  
      <p style = "font-size:25px;font-style:italic">Teks ukuran 25px, miring</p>  
      <p style="background-color: #43ac6a;color:white;padding:5px">background #43ac6a, teks warna putih, dan padding 5px</p>
      <p style = "font-size:30px;">Ukuran 30px, kalau ini <span style="font-size:15px;">cuma 15px</span></p> 
   </body>
 
</html> 

Lihat kode di atas, tag <p> mempunyai atribut style yang berisi kode CSS.

Hasilnya kalau dijalankan:

2. Internal CSS dalam file HTML

Praktekin css_internal.html:

<!DOCTYPE html>
<html>
<head>
      <title>Internal CSS pada HTML</title> 
      <style type = "text/css"> 
         h1 { 
            color: blue; 
         }
         .garis_bawah {
            text-decoration:underline;
         }
         .merah { 
            color: red; 
         } 
         .teksbesar_miring { 
            font-size:25px;
            font-style:italic;
         }
         
         .bghijau { background-color: #43ac6a; }
         .teksputih {color:white;}
         .padding5 {padding:5px}
         
         .fontsize30 { 
            font-size:30px; 
         } 
         .fontsize15 { 
            font-size:15px; 
         } 
      </style> 
</head>
<body>

    <h1 class="garis_bawah">Contoh internal CSS:</h1>
      <p class= "merah">Teks warna merah</p>  
      <p class = "teksbesar_miring">Teks ukuran 25px, miring</p>  
      <p class="bghijau teksputih padding5">background #43ac6a, teks warna putih, dan padding 5px</p>
      <p class = "fontsize30">Ukuran 30px, kalau ini <span class="fontsize15">cuma 15px</span></p> 

</body>
</html>

Hasilnya bisa dilihat dibawah ini:

Untuk internal css, kode css ada di tag <style type = "text/css"> 

<style type = "text/css"> 
    kode css....
    ...
    ...
</style>

3. External CSS

Praktekin, buat file style.css dulu ya

h1 { 
  color: blue; 
}
.garis_bawah {
  text-decoration:underline;
}
.merah { 
  color: red; 
} 
.teksbesar_miring { 
  font-size:25px;
  font-style:italic;
}

.bghijau { background-color: #43ac6a; }
.teksputih {color:white;}
.padding5 {padding:5px}

.fontsize30 { 
  font-size:30px; 
} 
.fontsize15 { 
  font-size:15px; 
} 

Kemudian buat lagi file dengan nama css_external.html

<!DOCTYPE html>
<html>
<head>
      <title>External CSS pada HTML</title> 
      <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>

    <h1 class="garis_bawah">Contoh external CSS:</h1>
      <p class= "merah">Teks warna merah</p>  
      <p class = "teksbesar_miring">Teks ukuran 25px, miring</p>  
      <p class="bghijau teksputih padding5">background #43ac6a, teks warna putih, dan padding 5px</p>
      <p class = "fontsize30">Ukuran 30px, kalau ini <span class="fontsize15">cuma 15px</span></p> 

</body>
</html>

Hasilnya:

Tag <link rel = "stylesheet" type = "text/css" href = "style.css"> itu untuk memanggil file style.css yang digunakan dalam dokumen tersebut. Boleh saja ada banyak file css, misalnya style2.css, style3.css dst. tagnya akan jadi banyak:

<link rel = "stylesheet" type = "text/css" href = "style.css">
<link rel = "stylesheet" type = "text/css" href = "style2.css">
<link rel = "stylesheet" type = "text/css" href = "style3.css">

 

Akhirnya ketiga cara menggunakan CSS dalam HTML telah selesai, lihat saja hasilnya sama kan? Cuma metode yang berbeda.

Mohon maaf saya tidak jelaskan secara detail tag dan atributnya. Semoga dengan mengetik sendiri kode programnya, anda langsung paham dengan konsep menggunakan CSS dalam HTML.

Saat mengetik program, pasti nanti akan bilang sendiri "oooo, begini untuk ini, begitu untuk itu". Jika terbiasa otodidak seperti itu, pasti akan semakin cepat belajar bahasa pemrograman apa saja nantinya...